Da Estilo a tus Hipervínculos con CSS

Los hipervínculos es uno de los elementos esenciales de los que se compone una web. Nos permiten conectar conectar dos puntos dentro de Internet de forma directa y sencilla. Y podemos encontrarlos en diferentes formatos: dentro de un texto, insertado en una imagen o un botón, etc. Pero en esta ocasión nos queremos centrar en los hipervínculos en un texto, y como hacerlos más visuales y atractivos para nuestros lectores.

No creo que descubra nada nuevo que el estilo de los hipervínculos por defecto nos resulta a muchos algo anticuado. El color del texto azul con el subrayado del mismo color, es posible que no encaje muy bien en el aspecto general de nuestro diseño web. Y no es de extrañar que es una de las primeras acciones que realizamos cuando empezamos a dar estilo con CSS.

Raro es el caso en el que una web actual que mantiene la apariencia por defecto de los hipervínculos. Lo puedes comprobar incluso en la web de SiloCreativo, donde nuestros hipervínculos tienen una tonalidad amarilla con subrayado en gris, que torna en amarillo también al pasar el cursor sobre él. Pero en este artículo queremos ir un poco más allá, y conseguir un aspecto mucho más llamativo.

Como siempre que tratamos un tutorial en el que hacemos uso de CSS, os recomendamos leer antes nuestra guía sobre CSS, para que tengáis unos conocimientos previos si nunca habéis usado este lenguaje. Y aunque no lo trataremos directamente, también podéis echar un vistazo a los conceptos básicos de HTML.

Cambiando el color del subrayado

Si usamos la propiedad color, cambiamos tanto el color del texto como del subrayado, y quizás no sea lo que vayamos buscando. Pero si queremos es solo cambiar el color del subrayado típico de un hipervínculo, debemos usar la propiedad text-decoration-color de esta forma:

a {
   text-decoration-color: fuchsia;
}

De esta forma, podemos desvincular el color del subrayado y el color del texto del hipervínculo, y que cada uno tenga una tonalidad diferente. Eso sí, según el color que usemos, puede que el ancho por defecto de 1 pixel no sea suficiente. Pero vamos a solucionarlo a continuación.

Modificando el grosor del subrayado

La siguiente propiedad que vamos a ver es text-decoration-thickness, que nos va a permitir definir el grosor que va a tener el subrayado de nuestra línea.

a {
   text-decoration-thickness: 8px;
}

Podemos introducir el valor de esta propiedad tanto en píxeles, como em o %, según se ajuste mejor a nuestras necesidades.

¿Que hacer con la rotura del subrayado en algunas palabras?

No se si te habrás fijado, pero en algunas palabras vemos como, al darle un grosor al subrayado mayor al por defecto de 1 pixel, el subrayado se corta y deja de ser continuo. Esto se produce en las palabras que tienen una letra con un asta descendiente. Es decir, aquellas letras, como la g o la p minúscula que tienen un rabito que sobrepasa por debajo la linea base del texto. Por suerte, podemos hacer que la línea se mantenga continua siempre gracias a la propiedad text-decoration-skip-ink.

a {
   text-decoration-skip-ink: none;
}

Por defecto, esta propiedad tiene el valor auto, en la que nuestro navegador decidirá si cortar el subrayado o no según el set de caracteres y/o el lenguaje. Con el valor none, le diremos que nunca se produzca este corte, sea cual sea la situación.

Moviendo de posición la línea

Una vez ya hemos visto como cambiar el color y grosor, también tenemos la opción de mover la línea en el eje vertical. Esto nos permite darle a nuestro texto un aspecto más original, casi como si estuviese subrayado por un marcador en la vida real. Y la propiedad que nos va a facilitar esto es text-underline-offset.

a {
   text-underline-offset: -5px;
}

Con un valor negativo, la linea se desplazará hacia arriba, y se colocará detrás del texto. Mientras que con un valor positivo se desplazará hacia abajo.

Probando otros estilos de línea

Solo hemos visto un subrayado de un estilo: una línea recta. Pero podemos jugar con otros estilos que nos ofrece CSS gracias a la propiedad text-decoration-style.

a {
   text-decoration-style: double;
}

Aquí disponemos de varios valores:

• double – tendremos dos líneas en vez de una.
• dotted – la línea será de puntos.
• wavy – una línea ondulada.
• dashed – una línea discontinua.

Conclusiones finales

Como hemos podido comprobar, con pocas líneas de CSS podemos cambiar por completo el estilo de los hipervínculos de los textos de nuestra web. Y por supuesto, podemos usarlo en conjunto con pseudo-clases como hover. Así, al pasar el cursor por encima de un hipervínculo, la línea puede cambiar de color, grosor y/o posición. Es cuestión de jugar y experimentar con todas las opciones disponibles.

Esperamos que os haya gustado este artículo y que, si no conocíais estas propiedades CSS, formen parte de vuestro catálogo para aplicarlo en futuros proyectos. Como siempre, tenéis disponible los comentarios, en los que nos podéis hacer llegar vuestras dudas, sugerencias y experiencias a la hora de dar estilo a los hipervínculos de vuestra web.