text-decoration-color

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Resumen

La propiedad text-decoration-color establece el color usado cuando se dibujan subrayados o líneas a través del texto, especificadas por la propiedad text-decoration-line. El color especificado será el mismo para los tres tipos de línea.

CSS no provee un mecanismo directo para especificar un color único para cada tipo de línea. Sin embargo, se puede obtener un efecto similar anidando elementos HTML, aplicando diferente tipo de línea para cada uno (via la propiedad text-decoration-line), y especificando un color de línea (usando text-decoration-color) propio para cada elemento.

Valor inicial	`currentcolor`
Applies to	all elements. It also applies to `::first-letter` and `::first-line`.
Heredable	no
Valor calculado	computed color
Animation type	a color

Sintaxis

css

/* valores <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;

Valores

<color>: La propiedad color acepta varlos nombres clave y notaciones numéricas. Vea <color> para más detalles.

Sintaxis formal

text-decoration-color = 
  <color>

Ejemplos

css

.example {
  text-decoration: underline;
  text-decoration-color: red;
}

El ejemplo anterior tiene el mismo efecto que el código siguiente, que además añade un estilo para cuando el elemento tiene el puntero del mouse encima.

html

<!doctype html>
<html>
  <head>
    <style>
      .example {
        font-size: 24px;
        text-decoration: underline;
        color: red;
      }
      .example:hover {
        color: blue;
        text-decoration: line-through;
      }
    </style>
  </head>
  <body>
    <span class="example">
      <span style="color:black;"
        >texto negro con subrayado rojo, y azul con el cursor encima</span
      >
    </span>
  </body>
</html>

Especificaciones

Specification
CSS Text Decoration Module Level 3 # text-decoration-color-property

Compatibilidad con navegadores

BCD tables only load in the browser