Propiedad CSS text-decoration-color

La propiedad text-decoration-color se utiliza para establecer el color de la decoración del texto. Puedes elegir colores desde aquí Colores HTML.

Estos colores se aplican a decoraciones como líneas superiores, subrayados y líneas onduladas.

La propiedad text-decoration-color es una de las propiedades CSS3.

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 de CSS text-decoration-color

css

text-decoration-color: color | initial | inherit;

INFO

Nota: El uso de la propiedad abreviada text-decoration restablece text-decoration-color a currentColor.

Ejemplo de la propiedad text-decoration-color:

Ejemplo de código CSS text-decoration-color

html

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

Try it Yourself »

Resultado

CSS text-decoration-color

Ejemplo de la propiedad text-decoration-color con los valores "underline" y "line-through":

Ejemplo de todos los valores de CSS text-decoration-color

html

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

Try it Yourself »

Valores

Valor	Descripción	Probar
color	Define el color de la decoración del texto. Se pueden usar nombres de colores, códigos hexadecimales, rgb(), rgba(), hsl(), hsla() y currentColor.	Probar »
initial	Establece la propiedad en su valor predeterminado.	Probar »
inherit	Hereda la propiedad de su elemento padre.

Práctica

¿Qué se puede establecer usando la propiedad 'text-decoration-color' en CSS?

Permite establecer el color del subrayado definido con 'text-decoration'.Ajusta el tamaño de la fuente.Cambia el estilo del texto.Permite establecer el color de la línea tachada definida con 'text-decoration'.Modifica el color de fondo de la página.

Propiedad CSS text-decoration-color ​

Sintaxis ​

Ejemplo de la propiedad text-decoration-color: ​

Resultado ​

Ejemplo de la propiedad text-decoration-color con los valores "underline" y "line-through": ​

Valores ​