Características text-decoration-color en CSS

La propiedad text-decoration-color CSS especifica el color de las líneas decorativas que se utilizan en el texto y se establecen mediante la propiedad text-decoration-line. Esto incluye líneas arriba, abajo o que pasan a través de la línea, o líneas onduladas (generalmente un error ortográfico, por ejemplo). El color establecido a través de esta propiedad se aplicará a todas las líneas de decoración seleccionadas en el objeto.

Funciones text-decoration-color css

Valor inicial	`currentcolor`
Aplicado a	Todos los artículos.
Heredable	No
Móvil	Sí
Valor calculado	valor del color `<color>`.

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.

/* <color> valores de color */ 
text-decoration-color: currentColor;
text-decoration-color: red;
text-decoration-color: #00ff00;
text-decoration-color: rgba(255, 128, 128, 0.5);
text-decoration-color: transparent;
/* valores globales */ 
text-decoration-color: inherit;
text-decoration-color: initial;
text-decoration-color: unset;

CSS no proporciona una forma directa de especificar un color único para cada fuente decorativa aplicada a un elemento, pero se puede hacer usando más de un elemento HTML y aplicando un tipo de fuente diferente a cada elemento (usando la propiedad text-decoration-line) y especificando la color de fuente (vía text-decoration-color) para cada elemento individualmente.

Ejemplos y aplicaciones en código

Un ejemplo del uso de la propiedad text-decoration-color con atributos text-decoration-line y text-decoration-style en un elemento <p> y un elemento <s> dentro de ella:

< p > en este párrafo < s > algunos errores ortográficos </ s > que queremos señalar. </ p >

Código CSS:

p { 
  text-decoration-line: underline;
  text-decoration-color: cyan;
}
s {
  text-decoration-line: line-through;
  text-decoration-color: red;
  text-decoration-style: wavy;
}

Soporte de navegadores

Característica	Chrome	Firefox	IE	Ópera	Safari
Soporte básico	57	36,0	No soportado	44	7.1 con el anterior `-webkit-`

Característica generales

La propiedad acepta text-decoration-color un solo valor de color.

<color>

Ajusta el color de la decoración.

Estructura text-decoration-color css

text-decoration-color: <color>;

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-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.