Características text-decoration-line en CSS

La propiedad text-decoration-line CSS especifica el tipo de líneas decorativas utilizadas en el texto. Si va a establecer varias propiedades para definir la forma de las líneas de decoración, se recomienda utilizar la propiedad corta text-decoration.

Funciones text-decoration-line css

Valor inicial	`none`
Aplicado a	Todos los artículos.
Heredable	No
Móvil	No
Valor calculado	Como se especificó.

/* Palabras reservadas */ 
text-decoration-line: none;
text-decoration-line: underline;
text-decoration-line: overline;
text-decoration-line: line-through;
text-decoration-line: blink;
text-decoration-line: underline overline;     /* usa dos líneas decorativas */ 
text-decoration-line: overline underline line-through;    /* Usa múltiples fuentes decorativas */   
/* Valores globales*/ 
text-decoration-line: inherit;
text-decoration-line: initial;
text-decoration-line: unset;

Ejemplos y aplicaciones en código

Ejemplo de uso de la propiedad text-decoration-line con atributos text-decoration-color y text-decoration-style sobre dos elementos <p>para agregar líneas decorativas al texto dentro de ellos:

< p  class = "wavy" > Este es un texto subrayado ondulado de color rojo. </ p > 
< p  class = "both" > Este texto tiene líneas arriba y abajo. </ p >

Código CSS:

.wavy { 
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}
.both {
  text-decoration-line: underline overline;
}

Soporte de navegadores

Característica	Chrome	Firefox	IE	Opera	Safari
Soporte básico	57	36.0	No soportado	44	7.1 con el anterior `-webkit-`

Características generales

La propiedad acepta una text-decoration-line palabra reservada none(lo que significa que no se usa decoración de texto) o los valores de una o más de las siguientes palabras reservadas separadas por un espacio.

underline

La fuente decorativa se colocará debajo del texto.

overline

La línea decorativa se colocará encima del texto.

line-through

La línea decorativa atravesará el texto.

blink

El texto parpadeará, pero está obsoleto porque se prefieren las animaciones CSS.

Estructura text-decoration-line css

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

Consulte también

La página de propiedades text-decoration que define la forma de las líneas decorativas utilizadas en el texto.
Página de propiedades text-decoration-color que especifica el color de las fuentes decorativas utilizadas en el texto.
La página de propiedades text-decoration-style que define la forma de las líneas decorativas utilizadas en el texto.