text-decoration-line

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

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

/* 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.
blink This deprecated API should no longer be used, but will probably still work.
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 This API has not been standardized.
El texto es decorado con el estilo de un ancla; no adecuado para contenido web.

Sintaxis formal

none | [ underline || overline || line-through || blink ] | spelling-error | grammar-error

Ejemplo

Contenido HTML

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

Contenido CSS

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

Especificaciones

Especificación Estado Comentarios
CSS Text Decoration Module Level 3
La definición de 'text-decoration-line' en esta especificación.
Candidate Recommendation Definición inicial. La propiedad text-decoration no era una forma reducida anteriormente.

Compatibilidad de 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.