Subrayado de Texto en CSS: Propiedad text-decoration

En HTML hay varias etiquetas que ayudan a llamar la atención sobre el texto: subrayarlo, resaltarlo o enfatizar algo. Estas etiquetas tienen estilos predeterminados y ya estamos acostumbrados a algunos de ellos.

Por ejemplo, sabemos que normalmente todos los enlaces de un sitio web están subrayados, el texto dentro de la etiqueta <del> está tachado, y todo lo que se encuentra dentro de la etiqueta, en amarillo.

<i>Texto en cursiva</i>
<em>Énfasis expresivo y emocional</em>
<b>Texto en negrita</b>
<strong>Texto importante</strong>
<mark>Texto resaltado</mark>
Texto con <small>fuente pequeña</small>
<del>Texto tachado (eliminado)</del>
<s>Texto que ya no es válido o relevante</s>
<ins>Texto subrayado</ins>
<u>Texto con estilo diferente</u>
Texto con <sup>superíndice</sup>
Texto con <sub>subíndice</sub>

Pero con text-decoration incluso puedes subrayar el texto desde arriba (¿qué? ¡sí!). Vamos a ver cómo hacerlo.

Propiedad text-decoration

Valores de text-decoration:

• line-through: tachado en medio del texto
• overline: subrayado, sobre el texto
• underline: subrayado, debajo del texto
• none: no se usa decoración
• inherit: heredado

Por ejemplo, la propiedad para texto subrayado se escribe simplemente como:

.underline-text {
  text-decoration: underline;
}

text-decoration es una forma abreviada de escribir un conjunto de propiedades CSS: text-decoration-line, text-decoration-color, text-decoration-style y text-decoration-thickness. Estas propiedades se usan para ajustar con más precisión los parámetros del subrayado.

text-decoration-line

text-decoration-line: se encarga del tipo de línea: subrayado, tachado, sin subrayado, subrayado sobre el texto, y no debajo de él.

<p class="underline">Texto subrayado normal</p>
<p class="line-through">Texto tachado</p>
<p class="overline">Subrayado sobre el texto</p>

 /* Texto subrayado normal */
  .underline {
    text-decoration-line: underline;
  }

  /* Texto tachado */
  .line-through {
    text-decoration-line: line-through;
  }

  /* Subrayado sobre el texto */
  .overline {
    text-decoration-line: overline;

text-decoration-line puede aceptar varios valores a la vez, por ejemplo, text-decoration-line: underline line-through;. En este caso, el texto tendrá subrayado y tachado.

text-decoration-color

text-decoration-color controla el color del subrayado. Por defecto, coincidirá con el color del texto.

<style>
    .red-line {
        text-decoration: underline dotted red;
    }
</style>

<p class="red-line">Línea roja punteada</p>

text-decoration-style

El estilo de línea (continua, ondulada, punteada, rayada y otras) se configura a través de la propiedad CSS text-decoration-style.

• solid: línea continua normal
• double: línea doble
• dotted: línea punteada (puntos)
• dashed: también línea punteada, pero con líneas cortas
• wavy: línea ondulada

<p class="solid">Línea continua normal</p>
<p class="double">Línea doble</p>
<p class="dotted">Línea punteada (puntos)</p>
<p class="dashed">Línea punteada con líneas cortas</p>
<p class="wavy">Línea ondulada</p>

  /* Línea continua normal */
  .solid {
    text-decoration-line: underline;
    text-decoration-style: solid;
  }

  /* Línea doble */
  .double {
    text-decoration-line: underline;
    text-decoration-style: double;
  }

  /* Línea punteada (puntos) */
  .dotted {
    text-decoration-line: underline;
    text-decoration-style: dotted;
  }

  /* Línea punteada con líneas cortas */
  .dashed {
    text-decoration-line: underline;
    text-decoration-style: dashed;
  }

  /* Línea ondulada */
  .wavy {
    text-decoration-line: underline;
    text-decoration-style: wavy;
  }

text-decoration-thickness

text-decoration-thickness establece el grosor de la línea.

<p class="custom-decoration">Texto con línea subrayada y grosor de 5px</p>

.custom-decoration {
    text-decoration-line: underline;
    text-decoration-thickness: 5px;
  }

text-underline-offset

Hasta hace poco, la apariencia del subrayado solo se controlaba con estas cuatro propiedades CSS (text-decoration-line, text-decoration-color, text-decoration-style y text-decoration-thickness). Pero había situaciones en las que esas propiedades no eran suficientes. Por ejemplo, es necesario resaltar el elemento activo del menú en un sitio web:

Si solo se usa text-decoration, el subrayado necesario no se puede implementar. Por supuesto, se puede agregar mediante un borde inferior, con estilo a través de pseudoelementos u otros métodos extraños.

Pero todo se simplificó con la aparición de text-underline-offset. La propiedad establece el desplazamiento del subrayado desde su posición original y se usa junto con la propiedad text-decoration.

<li class="site-navigation-item">
  <a class="site-navigation-link active">Catálogo</a>
</li>

.active {
  color: #ffffff;
  text-decoration: underline;
  text-decoration-color: #ffffff;

  /* Aquí definimos los parámetros para el subrayado */
text-underline-offset: 4px; /* Controla el desplazamiento del subrayado */

}

La propiedad text-underline-offset tiene buena compatibilidad con los navegadores, funciona en la mayoría de los navegadores modernos.