Playground de text-decoration en CSS

Guía educativa de text-decoration

Decorar el texto sin perder legibilidad

Un subrayado comunica una acción y un tachado puede expresar un cambio. Aprende a elegir línea, estilo, color y grosor, separar la decoración de los caracteres y mantener enlaces reconocibles.

Volver al playground

Modelo mental

La decoración se dibuja sobre el texto de cada línea; no es un borde de la caja ni cambia los caracteres.

Texto, trazo y separaciónEsquema conceptual, sin medidas tipográficas reales. Los números relacionan la tinta, el grosor del trazo y la separación del subrayado; no representan controles.

1 · Tinta de los caracteresLa fuente dibuja las letras y sus descendentes, como los de g o y.
2 · Grosor de la decoracióntext-decoration-thickness controla el trazo, no el peso de las letras.
3 · Separación del subrayadotext-underline-offset desplaza underline; no mueve overline ni line-through.

text-decoration añade trazos al texto. underline coloca una línea debajo, overline encima y line-through a través de las letras en escritura horizontal. Puedes combinar esas líneas con espacios. none no crea una decoración nueva; no se combina con las otras líneas.

El aspecto no añade semántica HTML. Un texto subrayado no se convierte en enlace: usa a con href para navegar. Si el tachado significa contenido eliminado, usa del; para contenido que ya no es válido, s puede ser adecuado. Explica el cambio con palabras cuando sea necesario.

Líneas, estilos y grosor

Elige qué dibujar y después cómo dibujarlo.

solid, double, dotted, dashed y wavy cambian el patrón del trazo. Todas las líneas de una misma decoración comparten estilo, color y grosor. Para un subrayado sólido y un overline de puntos, aplica decoraciones en elementos distintos.

text-decoration-color es independiente de color: cambia la línea, no las letras. Su valor inicial currentColor sigue el color del texto del elemento que origina la decoración. Conserva contraste suficiente en texto, trazo y fondo, también en oscuro.

auto deja el grosor al navegador. from-font consulta la métrica de la fuente y usa auto si no existe. Una longitud fija el grosor: px, rem o em expresan referencias distintas; 0.08em se relaciona con el tamaño del texto. Los porcentajes también se calculan respecto a 1em.

text-decoration: underline solid currentColor 0.08em;

text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-color: currentColor;
text-decoration-thickness: 0.08em;

El shorthand restablece las piezas omitidas. Si después de un grosor personalizado escribes text-decoration: underline, el grosor vuelve a auto. Usa text-decoration-line para cambiar solo la línea, o vuelve a expresar la decoración completa.

Cinco estilos con el mismo texto y grosor

solid · Tipografía con g, j, p e y

double · Tipografía con g, j, p e y

dotted · Tipografía con g, j, p e y

dashed · Tipografía con g, j, p e y

wavy · Tipografía con g, j, p e y

Las cinco muestras usan underline, currentColor y 2px, generados con el helper del playground. Cambia solo el estilo. Las etiquetas identifican el patrón; estas muestras son texto, no enlaces.

Cinco estilos con el mismo texto y grosor

HTML

<div class="decoration-guide-styles">
  <p class="decoration-guide-solid">solid · Tipografía con g, j, p e y</p>
  <p class="decoration-guide-double">double · Tipografía con g, j, p e y</p>
  <p class="decoration-guide-dotted">dotted · Tipografía con g, j, p e y</p>
  <p class="decoration-guide-dashed">dashed · Tipografía con g, j, p e y</p>
  <p class="decoration-guide-wavy">wavy · Tipografía con g, j, p e y</p>
</div>

CSS

:root {
  color-scheme: light dark;
}

.decoration-guide-styles {
  display: grid;
  gap: 1.5rem;
  color: light-dark(oklch(0.22 0.01 95), oklch(0.95 0.01 95));

  p {
    margin: 0;
    font: 600 1.25rem/1.8 system-ui, sans-serif;
    overflow-wrap: anywhere;
  }
}

.decoration-guide-solid {
  text-decoration: underline solid currentColor 2px;
}

.decoration-guide-double {
  text-decoration: underline double currentColor 2px;
}

.decoration-guide-dotted {
  text-decoration: underline dotted currentColor 2px;
}

.decoration-guide-dashed {
  text-decoration: underline dashed currentColor 2px;
}

.decoration-guide-wavy {
  text-decoration: underline wavy currentColor 2px;
}

Separación y continuidad del trazo

La distancia a las letras y las interrupciones alrededor de su tinta son decisiones diferentes.

text-underline-offset separa el subrayado de su posición original. Usa una distancia moderada y revisa varias líneas: aumentar el offset no reserva espacio en el layout. Un valor excesivo puede acercar el trazo a la línea siguiente; mantén line-height legible y evita clipping.

text-decoration-skip-ink: auto permite interrumpir underline y overline cerca de la tinta. none mantiene el trazo al cruzar los caracteres. No controla line-through. El resultado depende de la fuente y de la posición: si no hay cruces, auto y none pueden verse iguales.

Evitar tinta, cruzarla o separar el subrayado

skip-ink: auto · offset: auto

Tipografía con g, j, p e y

skip-ink: none · offset: auto

Tipografía con g, j, p e y

skip-ink: auto · offset: 0.25em

Tipografía con g, j, p e y

Las tres muestras conservan fuente, grosor e interlínea. La segunda cambia solo skip-ink a none; la tercera conserva auto y añade 0.25em de offset. Compara g, j, p e y. Ninguna muestra simula un navegador sin soporte.

Evitar tinta, cruzarla o separar el subrayado

HTML

<div class="decoration-guide-spacing">
  <div>
    <p>skip-ink: auto · offset: auto</p>
    <p class="decoration-guide-ink">Tipografía con g, j, p e y</p>
  </div>
  <div>
    <p>skip-ink: none · offset: auto</p>
    <p class="decoration-guide-ink is-continuous">Tipografía con g, j, p e y</p>
  </div>
  <div>
    <p>skip-ink: auto · offset: 0.25em</p>
    <p class="decoration-guide-ink is-offset">Tipografía con g, j, p e y</p>
  </div>
</div>

CSS

:root {
  color-scheme: light dark;
}

.decoration-guide-spacing {
  display: grid;
  gap: 2rem;
  color: light-dark(oklch(0.22 0.01 95), oklch(0.95 0.01 95));

  p {
    margin: 0;
    font: 1rem/1.6 system-ui, sans-serif;
  }

  .decoration-guide-ink {
    margin-block-start: 0.75rem;
    font: 600 1.5rem/1.8 Georgia, serif;
    text-decoration: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: auto;
    text-decoration-skip-ink: auto;
    overflow-wrap: anywhere;

    &.is-continuous {
      text-decoration-skip-ink: none;
    }

    &.is-offset {
      text-underline-offset: 0.25em;
    }
  }
}

Offset y skip-ink quedan fuera del shorthand y se declaran por separado. No sustituyas automáticamente el subrayado por border-block-end: un borde sigue la caja y no reproduce el dibujo alrededor de los caracteres ni de los fragmentos de un enlace multilínea.

Decoración del padre y texto descendiente

La continuidad visual no equivale a la herencia normal de una propiedad.

La decoración del padre se dibuja también sobre su texto descendiente inline. Aunque text-decoration no se hereda, un span con none no borra el trazo que origina el padre. El hijo puede añadir su propia decoración; no cambia el estilo o color de la que ya viene del padre.

Por qué none no elimina el subrayado del padre

Decoración en el padre · el hijo usa none

Este texto incluye un fragmento central dentro de la frase.

Decoración solo en los fragmentos elegidos

Este texto incluye un fragmento central dentro de la frase.

Arriba, el span declara none y la línea del padre sigue bajo la frase completa. Abajo, solo los fragmentos exteriores originan subrayados; el texto central queda sin ellos. La diferencia se conserva cuando la frase envuelve.

Por qué none no elimina el subrayado del padre

HTML

<div class="decoration-guide-continuity">
  <div>
    <p>Decoración en el padre · el hijo usa none</p>
    <p class="decoration-guide-parent">Este texto incluye <span>un fragmento central</span> dentro de la frase.</p>
  </div>
  <div>
    <p>Decoración solo en los fragmentos elegidos</p>
    <p class="decoration-guide-targeted"><span>Este texto incluye</span> un fragmento central <span>dentro de la frase.</span></p>
  </div>
</div>

CSS

:root {
  color-scheme: light dark;
}

.decoration-guide-continuity {
  display: grid;
  gap: 2rem;
  color: light-dark(oklch(0.22 0.01 95), oklch(0.95 0.01 95));

  p {
    margin: 0;
    font: 1rem/1.6 system-ui, sans-serif;
  }

  .decoration-guide-parent,
  .decoration-guide-targeted {
    margin-block-start: 0.75rem;
    font-size: 1.25rem;
    line-height: 1.8;
    overflow-wrap: anywhere;
  }
}

.decoration-guide-parent {
  text-decoration: underline;

  span {
    text-decoration: none;
  }
}

.decoration-guide-targeted span {
  text-decoration: underline;
}

Aplica la decoración al elemento que debe originarla, en lugar de intentar cancelarla desde sus hijos. Los elementos atómicos inline, como inline-block, tienen límites de propagación distintos; cambiar display solo para ocultar un trazo también altera el layout y los saltos de línea.

Enlaces reconocibles en un párrafo

La decoración ayuda a descubrir la navegación antes de pasar el puntero o recibir foco.

Mantén una señal visible además del color en enlaces dentro de texto. Un subrayado persistente es una opción clara para usuarios que no distinguen los colores. Hover puede reforzarlo, pero no debe ser la única forma de descubrir el enlace; el foco necesita su propio contorno.

Un enlace real con subrayado y foco visible

Para alinear cajas tipográficas, consulta la guía de text-box y conserva espacio para acentos y descendentes.

El enlace lleva a la guía de text-box en el idioma actual. Conserva subrayado en reposo, aumenta el grosor con hover y muestra contorno al recibir foco por teclado. Si se ignoran los ajustes de grosor o separación, sigue siendo un enlace subrayado.

Un enlace real con subrayado y foco visible

HTML

<p class="decoration-guide-paragraph">
  Para alinear cajas tipográficas, consulta
  <a href="/css/texts/text-box/#guide">la guía de text-box</a>
  y conserva espacio para acentos y descendentes.
</p>

CSS

:root {
  color-scheme: light dark;
}

.decoration-guide-paragraph {
  margin: 0;
  color: light-dark(oklch(0.22 0.01 95), oklch(0.95 0.01 95));
  font: 1.125rem/1.8 system-ui, sans-serif;
  overflow-wrap: anywhere;

  a {
    color: light-dark(oklch(0.46 0.14 261), oklch(0.82 0.18 261));
    text-decoration: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.2em;
    text-decoration-skip-ink: auto;

    &:hover {
      text-decoration-thickness: 0.14em;
    }

    &:focus-visible {
      outline: 2px solid currentColor;
      outline-offset: 3px;
    }
  }
}

Prueba nombres largos, saltos de línea, fuentes de fallback y texto ampliado. Un trazo muy grueso o cercano dificulta leer; una línea demasiado alejada pierde asociación con el enlace. Revisa contraste y legibilidad en los temas y navegadores de destino.

Errores frecuentes

Comprueba la línea activa, la cascada y el origen del trazo.

El estilo o el grosor no muestra ninguna línea

Resultado esperado: Ver un subrayado personalizado.
Causa: text-decoration-line permanece en none; estilo y grosor no activan una línea.
Solución: Declara underline u otra línea junto con el estilo y el grosor.

none en el hijo no quita el subrayado

Resultado esperado: Dejar un fragmento sin decoración.
Causa: La decoración se origina en el padre y se dibuja sobre el descendiente inline.
Solución: Retira la decoración del padre y aplícala solo a los fragmentos necesarios.

El grosor personalizado vuelve a auto

Resultado esperado: Cambiar la línea conservando el grosor.
Causa: Un shorthand posterior omite thickness y restablece su valor inicial.
Solución: Cambia text-decoration-line o incluye el grosor en el shorthand final.

El tachado no se mueve con offset

Resultado esperado: Separar line-through de las letras.
Causa: text-underline-offset solo afecta a underline, no a las otras líneas.
Solución: Usa offset para subrayados; revisa fuente y grosor del tachado sin esperar ese desplazamiento.

El enlace solo se distingue al pasar el puntero

Resultado esperado: Reconocer la navegación en un párrafo.
Causa: Se ha eliminado la señal persistente y se depende de hover o del color.
Solución: Mantén subrayado u otra señal visible y un foco de teclado independiente.

Soporte y compatibilidad

Comprueba cada propiedad y valor, además del shorthand básico.

MDN identifica text-decoration, thickness, underline-offset y skip-ink como ampliamente disponibles, con diferencias en algunas partes. Estas recetas usan líneas y estilos habituales y skip-ink auto/none. No extrapoles ese soporte a all ni a sintaxis nuevas del borrador.

La receta de enlace parte de text-decoration: underline y añade grosor y separación en declaraciones independientes. Si una mejora se ignora, se conserva el subrayado base. @supports comprueba sintaxis; no garantiza dibujo idéntico ni legibilidad con cualquier fuente.