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:
|
---|---|
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:
|
Animation type | as each of the properties of the shorthand:
|
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
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;
}
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 |
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
BCD tables only load in the browser
Véase también
- El atributo
list-style
controla la apariencia de los items en listas<ol>
y<ul>
de HTML.