Cor da decoração do texto - CSS-Tricks

Anonim

A text-decoration-colorpropriedade define a cor do sublinhado, do sobrelinhamento ou do contorno do texto com a text-decorationpropriedade aplicada. Ele também pode definir a cor de sublinhado nos links.

a ( text-decoration-color: #E18728; )

Valores

text-decoration-colorpode inheritou aceitar qualquer valor de cor CSS, incluindo cores nomeadas, cores HEX, RGBa e HSLa.

Forma abreviada

Em navegadores que suportam text-decoration-stylee text-decoration-colorvocê pode adicionar uma cor a uma text-decorationpropriedade abreviada:

.underlined ( text-decoration: underline dotted red; )

Atualmente, apenas o Firefox oferece suporte a este sem prefixo. O Safari oferece suporte com o -webkitprefixo. O Chrome também precisa do -webkitprefixo e dos recursos experimentais da plataforma da web ativados nas sinalizações do Chrome.

Demo

O text-decoration-colornesta demonstração funciona nas versões atuais do Firefox e Safari. Também funcionará no Chrome com o sinalizador “recursos experimentais da plataforma da Web” habilitado.

Veja a caneta text-decoration-color por CSS-Tricks (@ css-tricks) no CodePen.

Relacionado

  • text-decoration
  • text-decoration-line
  • text-decoration-style
  • text-decoration-skip

Mais Informações

  • text-decoration-color no Módulo de Decoração de Texto CSS Nível 3 CR
  • text-decoration-color em MDN

Suporte para navegador

cromada Safári Raposa de fogo Ópera IE Android iOS
31 † 7,1 * 6,0 ‡ Nenhum Nenhum Nenhum 8 *

† com os “recursos experimentais da plataforma da Web” ativados em chrome: // flags. O Chrome 31 precisava do prefixo -webkit-. Testamos o Chrome 50 e ele só funcionou sem prefixo.
‡ 6+ com prefixo -moz, sem prefixo a partir de 36.