Personalizar los colores del subrayado del texto con CSS

En diseño web, agregar un subrayado al texto es una práctica común para enfatizar o resaltar información. Sin embargo, ¿qué pasa si quieres añadir un toque único cambiando el color del subrayado? ¿Es posible?

Sí, es posible cambiar el color de la línea debajo del texto usando CSS. Aquí hay dos métodos que puede usar:

Método 1: usar text-decoration-color

El enfoque más sencillo es usar la propiedad text-decoration-color. Esta propiedad especifica el color del subrayado, lo que le permite personalizarlo independientemente del color del texto.

Por ejemplo, para crear texto rojo con un subrayado azul, usaría el siguiente CSS:

text-decoration-color: blue;

Método 2: usar border-bottom

Un método alternativo es usar la propiedad border-bottom. Esta propiedad crea un borde en la parte inferior del texto, que puede simular un subrayado. Al configurar la propiedad border-bottom-color, puede especificar el color del subrayado.

Por ejemplo, así es como lograría el mismo efecto que el Método 1 usando border-bottom:

border-bottom: 1px solid blue;
text-decoration: none;

Nota: La propiedad text-decoration-color es compatible con los navegadores modernos. Si necesita admitir navegadores más antiguos, es posible que desee utilizar el método del borde inferior para lograr compatibilidad.