Cómo subrayar texto en CSS: Desde lo básico hasta lo avanzado

Subrayar texto en CSS es una técnica común para resaltar o dar énfasis a ciertas partes del contenido. A continuación, exploraremos todas las formas de subrayar texto utilizando CSS, desde las más sencillas hasta las más avanzadas, incluyendo ejemplos de código para cada una.

Usar: text-decoration

La forma más sencilla de subrayar texto en CSS es utilizando la propiedad text-decoration que puede aceptar tres opciones: el estilo (underline) el color y el grosor del subrayado. Luego, podemos crear varios ejemplos:


span { text-decoration: underline; }
span { text-decoration: underline #dd356e; }
span { text-decoration: underline #dd356e 3px; }

Usar: border-bottom

Otra forma de subrayar texto es agregando un borde inferior con border-bottom, este método tiene la ventaja que puedes separar el borde usando un padding inferior.


span { border-bottom: solid 3px #dd356e; }
span { border-bottom: solid 3px #dd356e; padding-bottom: 2px; }

Usar: box-shadow

Podemos replicar el efecto de subrayado aplicando sombras con la propiedad box-shadow.


span { box-shadow: inset 0 -1px 0 0 black; }
span { box-shadow: inset 0 -3px 0 0 #dd356e; }

Usar: background-image

Otra forma de agregar subrayado es agregando un fondo con la propiedad background-image y para definir el fondo podemos hacerlo agregando un gradiente con linear-gradient:


span { background-image: linear-gradient(to bottom, transparent 85%, #dd356e 85%); }

Como podemos agregar gradientes de color, se puede ser mas creativo y lograr:


span {
    background-image: linear-gradient(to right, yellow, #dd356e);
    background-size: 100% 3px;
    background-repeat: no-repeat;
    background-position: bottom;
}

Usar: pseudo-elementos

Los pseudo-elementos permiten añadir contenido extra como decoraciones al texto. Usamos ::after para crear un subrayado.


span { position: relative; }
span::after { 
    position: absolute;
    content: '';
    width: 100%; height: 3px;
    background: #dd356e;
    left: 0; bottom: 0;
}

Combinaciones y efectos avanzados

Como primer ejemplo, vamos a hacer mas grueso el subrayado, lo vamos a poner un poco de transparencia y finalmente que se muestre una parte debajo del texto:


span { position: relative; }
span::after {
    position: absolute;
    content: '';
    width: 100%;
    height: 8px;
    background: #dd356e;
    left: 0;
    bottom: 0;
    opacity: 0.5;
    z-index: -1;
}

Como ejemplo final, en lugar de transparencia le agregaremos un fondo en degradado:


span { position: relative; }
span::after {
    position: absolute;
    content: '';
    width: 100%;
    height: 3px;
    background: linear-gradient(to right, yellow, #dd356e);
    left: 0;
    bottom: -2px;
    z-index: -1;
}

Puedes ver el ejemplo completo en Demo: Cómo subrayar texto en CSS

Conclusión

Existen múltiples formas de subrayar texto con CSS, cada una con sus propias ventajas y niveles de personalización. Desde el simple text-decoration hasta técnicas más avanzadas como los pseudo-elementos, puedes elegir la que mejor se adapte a tus necesidades de diseño.