text-decoration-line

La propiedad CSS text-decoration-line establece el tipo de decoración de línea que se agregará a un elemento.

Pruébalo

When setting multiple line-decoration properties at once, it may be more convenient to use the text-decoration shorthand property instead.

La decoración underline posiciona el subrayado debajo del texto, la decoración overline posiciona el subrayado encima del texto, y la decoración line-through posiciona la línea en medio del texto.

Sintaxis

css

/* Valores de clave */
text-decoration-line: none;
text-decoration-line: underline;
text-decoration-line: overline;
text-decoration-line: line-through;
text-decoration-line: underline overline;                /* Dos líneas de decoración */
text-decoration-line: overline underline line-through;   /* Múltiples líneas de decoración */

/* Valores globales */
text-decoration-line: inherit;
text-decoration-line: initial;
text-decoration-line: unset;

Valores

none

No agrega decoración al texto.

underline

Cada línea del texto lleva subrayado inferior.

overline

Cada línea del texto lleva subrayado superior.

line-through

Cada línea del texto lleva una línea atravesando por en medio del mismo.

El texto parpadea (se alterna entre visible e invisible). Según los ajustes del agente usuario, el texto puede simplemente no parpadear. Este valor está en desuso, en favor de las Animaciones.

-moz-anchor-decoration

El texto es decorado con el estilo de un ancla; no adecuado para contenido web.

Sintaxis formal

text-decoration-line = 
  none                                                |
  [ underline || overline || line-through || blink ]

Ejemplo

HTML

html

<p>¡Aquí hay texto con subrayado inferior rojo ondulado!</p>

CSS

css

p {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}

Especificaciones

Specification
CSS Text Decoration Module Level 3
# text-decoration-line-property

Compatibilidad con navegadores

BCD tables only load in the browser

Ver también

  • When setting multiple line-decoration properties at once, it may be more convenient to use the text-decoration shorthand property instead.