text-decoration-line

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

La propiedad text-decoration-line de CSS establece el tipo de decoración que se utiliza en el texto de un elemento, como un subrayado o un sobrerayado.

Pruébalo

Al configurar varias propiedades de decoración de línea a la vez, puede ser más conveniente usar la propiedad abreviada text-decoration en su lugar.

Sintaxis

css
/* Palabra clave única */
text-decoration-line: none;
text-decoration-line: underline;
text-decoration-line: overline;
text-decoration-line: line-through;
text-decoration-line: blink;

/* Varias palabras clave */
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: revert;
text-decoration-line: revert-layer;
text-decoration-line: unset;

La propiedad text-decoration-line se especifica como none, o uno o más valores separados por espacios de la lista a continuación.

Valores

none

No produce decoración de texto.

underline

Cada línea de texto tiene una línea decorativa debajo.

overline

Cada línea de texto tiene una línea decorativa encima.

line-through

Cada línea de texto tiene una línea decorativa que pasa por su centro.

El texto parpadea (alterna entre visible e invisible). Es posible que algunos navegadores no parpadeen el texto. Este valor está obsoleto en favor de animaciones CSS.

Definicion formal

Valor inicialnone
Applies toall elements. It also applies to ::first-letter and ::first-line.
Heredableno
Valor calculadocomo se especifica
Animation typediscrete

Sintaxis formal

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

Ejemplos

Ejemplo básico

html
<p class="wavy">¡Aquí hay un texto con subrayado rojo ondulado!</p>
<p class="both">Este texto tiene líneas arriba y abajo.</p>
css
.wavy {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}

.both {
  text-decoration-line: underline overline;
}

Especificaciones

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

Compatibilidad con navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
text-decoration-line
blink
Deprecated
grammar-error
Experimental
line-through
none
overline
spelling-error
Experimental
underline

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
Deprecated. Not for use in new websites.
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Véase también