Text-dekoration-färg - CSS-tricks

Anonim

I text-decoration-coloregenskap sätter färg på understrykning, överlinje eller linje igenom text med text-decorationegenskapen tillämpas. Det kan också ställa in understrykningsfärgen på länkar.

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

Värden

text-decoration-colorkan inheriteller acceptera valfritt CSS-färgvärde, inklusive namngivna färger, HEX-färger, RGBa och HSLa.

Stenografi

I webbläsare som stöder text-decoration-styleoch text-decoration-colordu kan lägga till en färg till en text-decorationstenografigendom:

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

För närvarande stöder endast Firefox detta oprefixade. Safari stöder det med -webkitprefixet. Chrome behöver också -webkitprefixet och experimentella webbplattformsfunktioner aktiverade i Chrome-flaggor.

Demo

Den text-decoration-colori denna demo fungerar i de nuvarande versionerna av Firefox och Safari. Det fungerar också i Chrome med flaggan "experimentella webbplattformfunktioner" aktiverad.

Se pennens text-dekorationsfärg av CSS-Tricks (@ css-tricks) på CodePen.

Relaterad

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

Mer information

  • text-decoration-color i CSS Text Decoration Module Level 3 CR
  • text-decoration-color vid MDN

Webbläsarstöd

Krom Safari Firefox Opera IE Android iOS
31 † 7,1 * 6,0 ‡ Ingen Ingen Ingen 8 *

† med "experimentella webbplattformsfunktioner" aktiverade i krom: // flaggor. Chrome 31 behövs -webkit- prefix. Vi testade Chrome 50 och det fungerade bara obestämt.
‡ 6+ med -moz-prefix, oprefixerat från och med 36.