Cómo cambiar los subrayados de enlaces HTML en una página web

Este artículo explica varias formas en que puede usar CSS para cambiar el aspecto predeterminado de los enlaces de texto en su página web eliminando el subrayado, cambiándolo a una línea de puntos o cambiando su color. Se incluye información adicional para cambiar el subrayado a una línea discontinua o doble subrayado.

Cómo quitar el subrayado en los enlaces de texto

De forma predeterminada, los navegadores web tienen ciertos Estilos CSS que se aplican a elementos HTML específicos. Si no sobrescribe estos valores predeterminados con las propias hojas de estilo de su sitio, se aplicarán los valores predeterminados. Para

hipervínculos, el estilo de visualización predeterminado es que cualquier texto vinculado es azul y está subrayado. Si lo desea, puede cambiar el aspecto de esos subrayados o eliminarlos por completo de su página web.

Para eliminar los subrayados de los enlaces de texto, utilice la propiedad CSS text-decoration. Aquí está el CSS que escribe para hacer esto:

a {decoración de texto: ninguna; }

Con esa única línea de CSS, eliminas el subrayado de todos los enlaces de texto de tu página web. Aunque este es un estilo muy general (utiliza un selector de elementos), todavía tiene más especificidad que los estilos de los navegadores predeterminados. Debido a que esos estilos predeterminados son los que crean los subrayados para empezar, eso es lo que necesita sobrescribir.

Una precaución sobre la eliminación de subrayados

Visualmente, la eliminación de subrayados puede ser exactamente lo que desea lograr, pero también debe tener cuidado al hacerlo. Tanto si le gusta el aspecto de los enlaces subrayados como si no, no puede argumentar que hacen evidente qué texto está enlazado y cuál no. Si quita los subrayados o cambia el color azul predeterminado del vínculo, debe asegurarse de reemplazarlos con estilos que aún permitan que el texto vinculado se destaque. Esto hará que la experiencia sea más intuitiva para los visitantes de su sitio.

No subrayar los no enlaces

Otra advertencia sobre los enlaces y subrayados, no subraye el texto que no es un enlace como una forma de enfatizarlo. La gente espera que el texto subrayado sea un enlace, por lo que si subraya el contenido para agregar énfasis (en lugar de ponerlo en negrita o en cursiva), envía el mensaje incorrecto y confundirá el sitio usuarios.

Cómo cambiar el subrayado a puntos o guiones

Si desea mantener los subrayados del enlace de texto, pero cambiar el estilo de ese subrayado del aspecto predeterminado, que es una línea "sólida", también puede hacerlo. En lugar de esa línea continua, puede usar puntos para subrayar sus enlaces. Para hacer esto, aún eliminará el subrayado, pero lo reemplazará con la propiedad de estilo del borde inferior:

a {decoración de texto: ninguna; borde inferior: 1 px con puntos; }

Como eliminó el subrayado estándar, el punteado es el único que aparece.

Puedes hacer lo mismo para obtener guiones. Simplemente cambie el estilo del borde inferior a discontinuo:

a {decoración de texto: ninguna; borde inferior: 1px discontinuo; }

Cómo cambiar el color del subrayado

Otra forma de llamar la atención sobre sus enlaces es cambiar el color del subrayado. Solo asegúrate de que el color se adapte a tu esquema de colores.

a {decoración de texto: ninguna; borde inferior: 1px rojo sólido; }

Subrayado doble

El truco para usar subrayados dobles es que debes cambiar el ancho del borde. Si crea un borde de 1 px de ancho, terminará con un subrayado doble que parece un solo subrayado.

a {decoración de texto: ninguna; borde inferior: 3px doble; }

También puede utilizar el subrayado existente para hacer un subrayado doble con otras características, como una de las líneas con puntos:

un {border-bottom: 1px double; }

No olvide los estados de enlace

Puede agregar el estilo de borde inferior a sus enlaces en diferentes estados, como: hover,: active o: visitado. Esto puede crear una agradable experiencia de estilo "rollover" para los visitantes cuando usa esa pseudoclase "hover". Para hacer que aparezca un segundo subrayado punteado al pasar el cursor sobre el enlace:

a {decoración de texto: ninguna; }
a: hover {border-bottom: 1px punteado; }