Características text-decoration en CSS

La propiedad text-decoration CSS determina la apariencia de las líneas decorativas utilizadas en el texto. Es una propiedad de acceso directo para establecer el valor de más de una propiedad sobre líneas decorativas al mismo tiempo, e incluye text-decoration-line, text-decoration-color y text-decoration-style.

Funciones text-decoration css

Valor inicial	Para cada valor corto: `text-decoration-color`: `currentcolor` `text-decoration-style`: `solid` `text-decoration-line`: `none`
Aplicado a	Todos los artículos.
Heredable	No
Móvil	No, excepto por el valor de la propiedad `text-decoration-color`.
Valor calculado	Longitud absoluta o palabra reservada `normal`.

/* Palabras reservadas */ 
text-decoration: none;
text-decoration: underline red;
text-decoration: underline wavy red;
/* Valores globales */ 
text-decoration: inherit;
text-decoration: initial;
text-decoration: unset;

Tenga en cuenta que las líneas de decoración se mostrarán en los elementos de texto secundarios, lo que significa que si un elemento especifica una decoración de texto, el elemento secundario no podrá eliminarlo. Por ejemplo, si tenemos el siguiente código ‎ This text has some emphasized words in it. ‎y se le aplica la regla p { text-‎decoration: underline;‎ ‎}, aparecerá una línea debajo de todo el párrafo y la regla no tendrá em { text-‎decoration: none; ‎}‎ningún efecto. Pero si lo usamos ‎‎em‎ ‎‎{ ‎text-decoration:‎ ‎overline‎; ‎‎}‎‎, mostrará otra línea de decoración encima del texto dentro del elemento .

Ejemplos y aplicaciones en código

Un ejemplo del uso de la propiedad abreviada text-decoration con varios valores:

< p  class = "under" > Este texto está subrayado. </ p > 
< p  class = "over" > Este texto está subrayado. </ p > 
< p  class = "line" > Una línea pasa por este texto. </ p > 
< p > <a class="plain" href="#"> el enlace no será subrayado </ a >, pero tenga cuidado al eliminar la fuente debajo de los enlaces, ya que esto puede confundir a los visitantes. </ p > 
< p  class = "underover" > Este texto está subrayado < em > y </ em > está subrayado . </ p > 
< p  class = "blink" > Este texto puede parpadear si su navegador lo admite. </ p >

Código CSS:

.under     { text-decoration: underline red; }
.over      { text-decoration: wavy overline lime; }
.line      { text-decoration: line-through; }
.plain     { text-decoration: none; }
.underover { text-decoration: dashed underline overline; }
.blink     { text-decoration: blink; }

Soporte de navegadores

Característica	Chrome	Firefox	IE	Opera	Safari
Soporte básico	1.0	1.0	3.0	3.5	1.0
Característica corta	soportado	36.0	No soportado	No soportado	7.1

Antes de que esta propiedad se abreviara, aceptaba cinco valores, a saber:

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

Características generales

La propiedad acepta text-decoration uno de los siguientes valores, separados por espacios, que representan los valores de propiedad que abrevia esta propiedad.

<text-decoration-line>

Ajuste el tipo (o ubicación) de las fuentes utilizadas en la decoración, como underline o line-through, consulte la página de propiedades text-decoration-line para obtener más información.

<text-decoration-color>

Ajusta el color de la decoración, consulte la página de características text-decoration-color para obtener más información.

<text-decoration-style>

Ajuste la forma de las fuentes utilizadas en la decoración, como solid, wavy o dashed, consulte la página de propiedades text-decoration-style para obtener más información.

Estructura text-decoration css

text-decoration: <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'>;

Consultar también

La página de propiedades text-decoration-color que especifica el color de las fuentes decorativas utilizadas en el texto.
Página de propiedades text-decoration-line que especifica el tipo de 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.