text-decoration-line

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.
blink Obsoleto: 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 inicial	`none`
Applies to	all elements. It also applies to `::first-letter` and `::first-line`.
Heredable	no
Valor calculado	como se especifica
Animation type (en-US)	discrete

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

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, que también incluye:
text-underline-offset (en-US)