Propriedade CSS text-decoration-color - Sintaxe, Valores, Exemplos.

A propriedade CSS text-decoration-color define a cor das linhas que decoram o texto — sublinhados, linhas acima do texto e linhas de riscado (line-through). Por padrão, uma linha de decoração assume a mesma cor do texto em si, então esta propriedade é o que você usa quando quer que a linha se destaque com uma cor diferente das palavras.

Esta página aborda a sintaxe, os valores que podem ser passados, como a propriedade interage com o atalho text-decoration e exemplos executáveis.

Por que uma propriedade de cor separada?

Sem text-decoration-color, um sublinhado sempre terá a mesma cor que o texto. Isso é adequado na maioria das vezes, mas os designers frequentemente querem uma linha mais sutil ou mais vívida — um sublinhado cinza sob um texto preto, um riscado vermelho sobre um preço citado, ou um sublinhado colorido que indica um estado de link. Separar a cor em sua própria propriedade longhand torna esses efeitos possíveis enquanto mantém a cor do texto intacta.

É uma das três propriedades longhand que compõem o atalho text-decoration, junto com text-decoration-line (qual linha: underline, overline, line-through) e text-decoration-style (solid, wavy, dotted, dashed, double). Por si só, text-decoration-color não tem efeito visível a menos que uma linha de decoração também esteja presente.

A propriedade é uma das propriedades CSS3. Qualquer cor CSS válida funciona — veja a lista completa em cores HTML.

Valor Inicial	currentColor
Aplica-se a	Todos os elementos. Também se aplica a ::first-letter e ::first-line.
Herdado	Não.
Animável	Sim. A cor é animável.
Versão	CSS Text Decoration Module Level 3
Sintaxe DOM	object.style.textDecorationColor = "#ccc";

Sintaxe

Sintaxe CSS de text-decoration-color

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

Onde color é qualquer valor de cor CSS. O padrão é currentColor, o que significa que a linha de decoração corresponde à cor do texto do elemento.

Informação

Nota: Usar o atalho text-decoration redefine text-decoration-color para seu valor inicial (currentColor), a menos que você inclua uma cor no atalho. Portanto, se você definir a cor separadamente, declare-a depois de qualquer atalho text-decoration, ou inclua a cor dentro do próprio atalho.

Exemplo da propriedade text-decoration-color:

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

Experimente Você Mesmo »

Resultado

Exemplo da propriedade text-decoration-color com os valores "underline" e "line-through":

Exemplo CSS text-decoration-color com todos os 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>

Experimente Você Mesmo »

Usando currentColor

O valor inicial currentColor mantém a linha de decoração sincronizada com a cor do texto. Isso é útil quando a cor do texto muda no :hover ou em diferentes temas — o sublinhado segue automaticamente sem uma segunda regra:

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 */
}

Pontos de atenção

Sem linha, sem cor. text-decoration-color só aparece quando existe uma linha de decoração. Use-a junto com text-decoration-line (ou o atalho text-decoration) — caso contrário, nada será exibido.
A ordem do atalho importa. Um atalho text-decoration posterior vai redefinir a cor de volta para currentColor. Defina a cor por último, ou escreva a cor dentro do atalho: text-decoration: underline #8ebf42;.
Ela não é herdada. Cada elemento calcula seu próprio valor, mas como o padrão é currentColor, um elemento filho tende a corresponder à sua própria cor de texto herdada.
Ela é animável. Como as transições de cor são suaves, você pode animar a cor do sublinhado ao passar o mouse com uma transition.

Para controlar a espessura da linha, veja text-decoration-style e o atalho completo text-decoration.

Valores

Valor	Descrição	Experimente
color	Define a cor da decoração de texto. Nomes de cores, códigos de cores hexadecimais, rgb(), rgba(), hsl(), hsla() e currentColor podem ser usados.	Experimente »
initial	Define a propriedade para seu valor padrão.	Experimente »
inherit	Herda a propriedade de seu elemento pai.

Prática

O que pode ser definido usando a propriedade 'text-decoration-color' no CSS?

Permite definir a cor do sublinhado que é definido com 'text-decoration'.Ajusta o tamanho da fonte.Altera o estilo do texto.Permite definir a cor do riscado que é definido com 'text-decoration'.Modifica a cor de fundo da página.