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.

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

BCD tables only load in the browser

Véase también