text-decoration

La propiedad CSS text-decoration se usa para establecer el formato de texto a subrayado (underline) y suprarrayado (overline), tachado (line-through) o parpadeo (blink). El subrayado y el suprarrayado son posicionados bajo el texto, mientras la línea a través de éste se posiciona por encima.

Las decoraciones de texto se dibujan a través de los elementos descendientes. Esto significa que no es posible deshabilitar la decoración en un descendiente si la propiedad se especifica en un elemento ancestro. Por ejemplo, en el código <p>Este texto tiene <em>algunas palabras enfatizadas</em> en él.</p>, la regla de estilos p { text-decoration: underline; } causará que el párrafo entero tenga subrayado. La regla em { text-decoration: none; } no causará ningún cambio; el párrafo entero seguirá subrayado. Sin embargo, la regla em { text-decoration: overline; } causará una segunda decoración que aparecerá sobre "algunas palabras enfatizadas".

Nota: El Nivel 3 de Decoraciones de Texto transformó esta propiedad en la forma reducida de las tres propiedades nuevas text-decoration-color, text-decoration-line, y text-decoration-style. Como en cualquier otra propiedad reducida, esto significa que restaura sus valores a los predeterminados si no son definidos explícitamente en la propiedad.

Valor inicial	as each of the properties of the shorthand: `text-decoration-color`: `currentcolor` `text-decoration-style`: `solid` `text-decoration-line`: `none`
Applies to	all elements. It also applies to `::first-letter` and `::first-line`.
Heredable	no
Valor calculado	as each of the properties of the shorthand: `text-decoration-line`: como se especifica `text-decoration-style`: como se especifica `text-decoration-color`: computed color text-decoration-thickness (en-US): como se especifica
Animation type	as each of the properties of the shorthand: `text-decoration-color`: a color `text-decoration-style`: discrete `text-decoration-line`: discrete text-decoration-thickness (en-US): by computed value type

Sintaxis

/* Valores clave */
text-decoration: none;                 /* Sin decoración */
text-decoration: underline red;        /* Subrayado rojo */
text-decoration: underline wavy red;   /* Subrayado rojo ondulado */

/* Valores globales */
text-decoration: inherit;
text-decoration: initial;
text-decoration: unset;

Valores

La propiedad text-decoration es una forma reducida, y puede usar los valores de cada una de las propiedades de la forma larga: text-decoration-line, text-decoration-color, y text-decoration-style

Sintaxis formal

<'text-decoration-line'> || (en-US) <'text-decoration-style'> || (en-US) <'text-decoration-color'> || (en-US) <'text-decoration-thickness'> (en-US)

Ejemplos

h1.under {
    text-decoration: underline;
}
h1.over {
    text-decoration: overline;
}
p.line {
    text-decoration: line-through;
}
p.blink {
    text-decoration: blink;
}
a.none {
    text-decoration: none;
}
p.underover {
    text-decoration: underline overline;
}

<h1 class="under">Underlined Header</h1>
<p class="line">If you want to strike out text, use line-through.</p>
<p class="blink">This text might blink for you - if you use Explorer, it will not.</p>
<h1 class="over">and now an overlined header.</h1>
<p>This <a class="none" href="textdecoration.html">link will not be underlined</a>, as most links are by default. Be careful with removing the text decoration on links since most users depend on the underline to signify a hyperlink.</p>
<p class="underover">This text has both underline and overline.</p>

Especificaciones

Especificación	Estado	Comentarios
CSS Text Decoration Module Level 3 La definición de 'text-decoration' en esta especificación.	Candidate Recommendation	Transformada a propiedad reducida. Soporte agregado para el valor de `text-decoration-style`.
CSS Level 2 (Revision 1) La definición de 'text-decoration' en esta especificación.	Recommendation	Sin cambios significativos
CSS Level 1 La definición de 'text-decoration' en esta especificación.	Recommendation	Definición inicial

Compatibilidad de navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)

Escritorio
Móvil

Característica	Firefox (Gecko)	Chrome	Internet Explorer	Opera	Safari
Soporte básico	1.0 (1.7 o anterior)	1.0	3.0	3.5	1.0
valor `blink`	1.0 (1.7 o anterior) 23.0 (23.0)^[1]	(Yes)^[1]	(Yes)^[1]	4.0 15.0^[1]	(Yes)^[1]
Propiedad reducida	6.0 (6.0)^[3] 36.0 (36.0)	Sin soporte	Sin soporte	Sin soporte	7.1^[2]

Característica	Firefox Mobile (Gecko)	Android	IE Phone	Opera Mobile	Safari Mobile
Soporte básico	1.0 (1.0)	(Yes)	(Yes)	(Yes)	(Yes)
valor `blink`	1.0 (1.7 o anterior) 23.0 (23.0)^[1]	(Yes)^[1]	(Yes)^[1]	4.0^[1]	(Yes)^[1]
Propiedad reducida	6.0 (6.0)^[3] 36.0 (36.0)	?	?	?	8^[1]

[1] El valor blink no tiene ningún efecto.

[2] Safari no soporta text-decoration-style.

[3] Esta versión de Gecko tiene una implementación parcial.

Véase también

El atributo list-style controla la apariencia de los items en listas <ol> y <ul> de HTML.