Farebná dekorácia textu - Triky CSS

Anonim

Táto text-decoration-colorvlastnosť nastavuje farbu podčiarknutia, podčiarknutia alebo prešmykovania textu s text-decorationpoužitou vlastnosťou. Môže tiež nastaviť farbu podčiarknutia odkazov.

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

Hodnoty

text-decoration-colormôže inheritalebo prijíma akékoľvek hodnoty farieb CSS vrátane pomenovaných farieb, farieb HEX, RGBa a HSLa.

Skratka

V prehľadávačoch, ktoré podporujú text-decoration-stylea text-decoration-colormôžete pridať farbu do text-decorationvlastnosti skratky:

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

Túto predponu momentálne podporuje iba Firefox. Safari to podporuje -webkitpredponou. Prehliadač Chrome tiež vyžaduje -webkitpredponu a experimentálne funkcie webovej platformy povolené v príznakoch prehliadača Chrome.

Ukážka

V text-decoration-colortejto ukážke funguje v aktuálnych verziách prehľadávačov Firefox a Safari. Bude tiež fungovať v prehliadači Chrome s povoleným príznakom „experimentálne funkcie webovej platformy“.

Pozrite si textovú dekoráciu pera od CSS-Tricks (@ css-tricks) na CodePen.

Súvisiace

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

Viac informácií

  • text-decoration-color v module CSS Textové dekorácie úrovne 3 CR
  • text-decoration-color na MDN

Podpora prehľadávača

Chrome Safari Firefox Opera IE Android iOS
31 † 7,1 * 6,0 ‡ Žiadne Žiadne Žiadne 8 *

† so zapnutými „experimentálnymi funkciami webovej platformy“ v chrome: // flags. Vyžaduje sa Chrome 31 - predpona - webkit-. Testovali sme Chrome 50 a fungoval iba bez opravy.
‡ 6+ s predponou -moz, bez predpony k 36.