Textová dekorace-barva - Triky CSS

Anonim

text-decoration-colorVlastnost nastavuje barvu podtržení, overline nebo linkovým vstupem přes textu s text-decorationmajetkem použita. Může také nastavit barvu podtržení u odkazů.

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

Hodnoty

text-decoration-colormůže inheritnebo přijímá jakoukoli hodnotu barvy CSS, včetně pojmenovaných barev, barev HEX, RGBa a HSLa.

Těsnopis

V prohlížečích, které podporují text-decoration-stylea text-decoration-colormůžete přidat barvu do text-decorationvlastnosti zkratky:

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

V současné době to podporuje pouze Firefox. Safari to podporuje -webkitpředponou. Chrome také potřebuje -webkitpředponu a experimentální funkce webové platformy povolené ve vlajkách Chrome.

Ukázka

V text-decoration-colortéto ukázce funguje v aktuálních verzích Firefoxu a Safari. Bude také fungovat v prohlížeči Chrome s povoleným příznakem „experimentální funkce webové platformy“.

Podívejte se na textovou dekoraci pera od CSS-Tricks (@ css-tricks) na CodePen.

Příbuzný

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

Více informací

  • text-decoration-color v modulu CSS Text Decoration Level 3 CR
  • text-decoration-color ve společnosti MDN

Podpora prohlížeče

Chrome Safari Firefox Opera TJ Android iOS
31 † 7,1 * 6,0 ‡ Žádný Žádný Žádný 8 *

† se zapnutými „experimentálními funkcemi webové platformy“ v chrome: // flags. Je potřeba předpona Chrome 31 -webkit-. Testovali jsme Chrome 50 a fungoval pouze bez opravy.
‡ 6+ s předponou -moz, bez předpony k 36.