Propiedad CSS text-decoration-color
Usa la propiedad CSS text-decoration-color para especificar el color de la decoración de texto. Consulta los valores y prueba ejemplos.
La propiedad CSS text-decoration-color establece el color de las líneas que decoran el texto — subrayados, sobrelineados y tachados (line-through). Por defecto, una línea de decoración toma el mismo color que el texto, por lo que esta propiedad es la que se utiliza cuando se quiere que la línea destaque con un color diferente al de las palabras.
Esta página cubre la sintaxis, los valores que se pueden pasar, cómo interactúa la propiedad con la forma abreviada text-decoration y ejemplos ejecutables.
¿Por qué una propiedad de color independiente?
Sin text-decoration-color, un subrayado siempre tiene el mismo color que el texto. Esto está bien la mayor parte del tiempo, pero los diseñadores suelen querer una línea más sutil o más vívida — un subrayado gris bajo texto negro, un tachado rojo sobre un precio citado, o un subrayado de color que indique el estado de un enlace. Separar el color en su propia propiedad larga hace posibles esos efectos sin alterar el color del texto.
Es una de las tres propiedades largas que forman la forma abreviada text-decoration, junto con text-decoration-line (qué línea: underline, overline, line-through) y text-decoration-style (solid, wavy, dotted, dashed, double). Por sí sola, text-decoration-color no tiene efecto visible a menos que también exista una línea de decoración.
La propiedad es una de las propiedades CSS3. Cualquier color CSS válido funciona — consulta la lista completa en colores HTML.
| Valor inicial | currentColor |
|---|---|
| Se aplica a | Todos los elementos. También se aplica a ::first-letter y ::first-line. |
| Heredable | No. |
| Animable | Sí. El color es animable. |
| Versión | CSS Text Decoration Module Level 3 |
| Sintaxis DOM | object.style.textDecorationColor = "#ccc"; |
Sintaxis
Sintaxis CSS de text-decoration-color
text-decoration-color: color | initial | inherit;Donde color es cualquier valor de color CSS. El valor predeterminado es currentColor, lo que significa que la línea de decoración coincide con el color del texto del elemento.
Nota: Usar la forma abreviada text-decoration restablece text-decoration-color a su valor inicial (currentColor) a menos que incluyas un color en la forma abreviada. Por lo tanto, si estableces el color por separado, decláralo después de cualquier forma abreviada text-decoration, o incluye el color dentro de la propia forma abreviada.
Ejemplo de la propiedad text-decoration-color:
Ejemplo de código CSS text-decoration-color
<!DOCTYPE html>
<html>
<head>
<title>Title of the text</title>
<style>
p {
text-decoration: overline underline;
text-decoration-color: #8ebf42;
}
</style>
</head>
<body>
<h2>Text-decoration-color property example</h2>
<p>Lorem ipsum is simply dummy text...</p>
</body>
</html>Resultado
Ejemplo de la propiedad text-decoration-color con los valores "underline" y "line-through":
Ejemplo CSS text-decoration-color con todos los valores
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
text-decoration-line: underline;
text-decoration-color: #666666;
text-decoration-style: wavy;
}
s {
text-decoration-line: line-through;
text-decoration-color: #c91010;
}
</style>
</head>
<body>
<h2>Text-decoration-color property example</h2>
<p>Lorem ipsum is <s>simply dummy</s> text...</p>
</body>
</html>Uso de currentColor
El valor inicial currentColor mantiene la línea de decoración sincronizada con el color del texto. Esto resulta útil cuando el color del texto cambia en :hover o en diferentes temas — el subrayado sigue automáticamente sin necesidad de una segunda regla:
a {
color: #8ebf42;
text-decoration-line: underline;
text-decoration-color: currentColor; /* line matches the link color */
}
a:hover {
color: #c91010; /* both text and underline turn red */
}Aspectos a tener en cuenta
- Sin línea, sin color.
text-decoration-colorsolo se muestra cuando existe una línea de decoración. Combínala context-decoration-line(o la forma abreviadatext-decoration) — de lo contrario no aparece nada. - El orden de la forma abreviada importa. Una forma abreviada
text-decorationposterior restablecerá el color acurrentColor. Establece el color al final, o escribe el color dentro de la forma abreviada:text-decoration: underline #8ebf42;. - No se hereda. Cada elemento calcula su propio valor, pero como el valor predeterminado es
currentColor, un elemento hijo tiende a coincidir con su propio color de texto heredado. - Es animable. Dado que las transiciones de color son suaves, puedes animar el color del subrayado al pasar el cursor con una
transition.
Para controlar el grosor de la línea, consulta text-decoration-style y la forma abreviada completa text-decoration.
Valores
| Valor | Descripción | Pruébalo |
|---|---|---|
| color | Define el color de la decoración de texto. Se pueden usar nombres de colores, códigos hexadecimales, rgb(), rgba(), hsl(), hsla() y currentColor. | Pruébalo » |
| initial | Establece la propiedad a su valor predeterminado. | Pruébalo » |
| inherit | Hereda la propiedad de su elemento padre. |