Hipervínculos con CSS, destaca agregando estilos a tu web

Dentro de los elementos principales que conforman una web tenemos a los hipervínculos, los cuales facilitan comunicar dos puntos dentro de Internet, de manera directa y fácil.
Se pueden conseguir en distintos formatos: a lo interno de un texto, incrustado en una imagen o un botón, etc. En esta ocasión nos centraremos en los hipervínculos con CSS de un texto, y como transformarlos en más visuales y llamativos para nuestros lectores.

Es posible que para muchos usuarios el estilo de los hipervínculos resulte algo anticuado. Por ejemplo, el color azul en el texto y subrayado, es probable que no se ajuste adecuadamente con el aspecto general de nuestra página.
Existen casos donde una web actual conserva el aspecto por defecto de los hipervínculos, por extraño que parezca. Inclusive, en la página de nerade.com, los hipervínculos con CSS presentan un colorido amarillo con subrayado gris, que se convierte igualmente en amarillo al pasar el cursor sobre él. Sin embargo, podemos ir más allá y conseguir un aspecto mucho más sugestivo.

Cambiando el color del subrayado

Al utilizar la propiedad color, variamos el color del texto, así como del subrayado, pero posiblemente eso no sea lo que busquemos. Si deseamos cambiar solamente el color del subrayado característico de los hipervínculos con CSS, se debe aplicar la propiedad text-decoration-color:
De esa manera se independiza, en el hipervínculo, el color del texto del color del subrayado, y cada uno puede tener una tonalidad distinta. Pero esto tiene una pequeña dificultad; de acuerdo al color que utilicemos, puede que el ancho por defecto de pixel no sea suficiente. A continuación, se ofrece la solución.

Subrayado más grueso o más delgado

Para precisar el grosor que va a mostrar la línea de subrayado se aplica la siguiente propiedad: text-decoration-thickness. Los valores de esta propiedad se pueden introducir en píxeles, en em o %, de acuerdo a nuestros requerimientos.
Ciertas palabras pueden presentar rotura en su subrayado
Al darle grosor mayor de 1 pixel al subrayado de algunas palabras, se corta, se interrumpe y no es continuo. Este fenómeno ocurre en palabras que tienen alguna letra con una asta descendiente.
O sea, las letras como la g o la p minúscula que presentan una especie de rabo que atraviesa la línea base del texto. Para que la línea se conserve continua tenemos la propiedad text-decoration-skip-ink.
Esta propiedad posee el valor auto por defecto, en la que el internauta determinará si cortar o no el subrayado, de acuerdo al set de caracteres y/o el lenguaje. Aplicando el valor none, le instruimos que no se produzca ese corte, en cualquier situación.

Cambiando de posición la línea

Aparte de saber la forma de variar el color y el grosor, además existe la alternativa de cambiar la línea, a lo largo del eje vertical. Con esta herramienta se puede dar a un texto una apariencia más única. La propiedad que permite realizar eso es text-underline-offset.

La dinámica es que con un valor positivo se desplaza hacia abajo, y con valores negativos la línea se dirigirá hacia arriba, colocándose atrás del texto.

Experimentando con otros estilos de línea

La línea recta es la que usualmente hemos visto para el subrayado. Pero con CSS podemos experimentar con otros estilos que nos puede brindar con su herramienta: text-decoration-style.
En resumen

Gracias a los efectos de hipervínculos con CSS se pueden transformar por completo el estilo de los hipervínculos en los textos de nuestra web. Incluso, se pueden usar en conjunto con pseudo-clases como hover. De esta manera, al cruzar el cursor por arriba de un hipervínculo, la línea puede variar de color, grosor y/o posición. Se trata de jugar y probar con todas las opciones a la disposición.