text-decoration-line

This translation is incomplete. Please help translate this article from English

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
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

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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
text-decoration-lineChrome Soporte completo 57Edge Soporte completo 79Firefox Soporte completo 36
Soporte completo 36
Sin soporte 6 — 39
Prefijado
Prefijado Requiere de un prefijo de vendedor : -moz-
IE Sin soporte NoOpera Soporte completo 44Safari Soporte completo 12.1
Soporte completo 12.1
Soporte completo 8
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
WebView Android Soporte completo 57Chrome Android Soporte completo 57Firefox Android Soporte completo 36
Soporte completo 36
Sin soporte 6 — 39
Prefijado
Prefijado Requiere de un prefijo de vendedor : -moz-
Opera Android Soporte completo 43Safari iOS Soporte completo 12.2
Soporte completo 12.2
Soporte completo 8
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Samsung Internet Android Soporte completo 7.0
blink
Deprecado
Chrome Soporte completo 57
Notas
Soporte completo 57
Notas
Notas The blink value does not have any effect.
Edge Soporte completo 79
Notas
Soporte completo 79
Notas
Notas The blink value does not have any effect.
Firefox Soporte completo 26
Notas
Soporte completo 26
Notas
Notas The blink value does not have any effect.
IE Sin soporte NoOpera Soporte completo 44Safari Soporte completo 8WebView Android Soporte completo 57
Notas
Soporte completo 57
Notas
Notas The blink value does not have any effect.
Chrome Android Soporte completo 57
Notas
Soporte completo 57
Notas
Notas The blink value does not have any effect.
Firefox Android Soporte completo 26
Notas
Soporte completo 26
Notas
Notas The blink value does not have any effect.
Opera Android Soporte completo 43Safari iOS Soporte completo 8Samsung Internet Android Soporte completo 7.0
Notas
Soporte completo 7.0
Notas
Notas The blink value does not have any effect.

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Deprecado. No debe ser usado en nuevos sitios web.
Deprecado. No debe ser usado en nuevos sitios web.
Ver notas de implementación.
Ver notas de implementación.
Requiere de un prefijo de proveedor o un de nombre diferente para su uso.
Requiere de un prefijo de proveedor o un de nombre diferente para su uso.

Ver también

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