UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.
The text-decoration-color property sets the color of the underline, overline, or line-through on text with the text-decoration property applied. It can also set the underline color on links.
a {
text-decoration-color: #E18728;
}Values
text-decoration-color can inherit or accept any CSS color value, including named colors, HEX colors, RGBa, and HSLa.
Shorthand
In browsers that support text-decoration-style and text-decoration-color you can add a color to a text-decoration shorthand property:
.underlined {
text-decoration: underline dotted red;
}Currently only Firefox supports this unprefixed. Safari supports it with the -webkit prefix. Chrome also needs the -webkit prefix and experimental web platform features enabled in Chrome flags.
Demo
The text-decoration-color in this demo works in the current versions of Firefox and Safari. It will also work in Chrome with the “experimental Web Platform features” flag enabled.
Browser support
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 31† | 7.1* | 6.0‡ | None | None | None | 8* |
† with the “experimental Web Platform features” turned on in chrome://flags. Chrome 31 needed -webkit- prefix. We tested Chrome 50 and it only worked unprefixed.
‡ 6+ with -moz prefix, unprefixed as of 36.
More information
Related
text-decoration
.element { text-decoration: underline; }
text-decoration-line
.element { text-decoration-line: underline; }
text-decoration-skip
.element { text-decoration-skip: ink; }
text-decoration-skip-ink
.element {text-decoration-skip-ink: none; }
text-decoration-style
.element { text-decoration-style: wavy; }
text-decoration-thickness
.element { text-decoration-thickness: 2px; }
This makes me finally want to use text-decoration :) At last underline will have an interesting look
Unfortunately it seems that neither
transitionnor:visitedis working with text-decoration so far.Why isn’t this supported? Seems like something that should be given that text-decoration is supported across browsers.
I’m testing this in chrome 54 and it doesnt work with prefix or without it
Hi, I’m testing this in chrome 55 and it isn’t working with the prefix or with out it, in safari 10 it only works with the prefix, and in firexos 50.1 it works without the prefix.