is “text-decoration-color” supported?
Includes prefixes
by David Storey
HTML
<p id="currentColor">Decoration is same colour as the text</p>
<p id="keyword">Decoration is blue, via keyword</p>
<p id="hex">Decoration is blue, via hex notation</p>
<p id="rgb">Decoration is blue, via rgb notation</p>
<p id="rgba">Decoration is semi-transparent blue, via rgba</p>
<p id="hsl">Decoration is blue, via hsl notation</p>
<p id="hsla">Decoration is semi-transparent blue, via hsla</p>
<p id="transparent">Decoration is transparent</p>
CSS
p {
-webkit-text-decoration-line: underline;
-moz-text-decoration-line: underline;
-ms-text-decoration-line: underline;
text-decoration-line: underline;
color: green;
}
#currentColor {
-webkit-text-decoration-color: currentColor;
-moz-text-decoration-color: currentColor;
-ms-text-decoration-color: currentColor;
text-decoration-color: currentColor;
}
#keyword {
-webkit-text-decoration-color: blue;
-moz-text-decoration-color: blue;
-ms-text-decoration-color: blue;
text-decoration-color: blue;
}
#hex {
-webkit-text-decoration-color: #0000FF;
-moz-text-decoration-color: #0000FF;
-ms-text-decoration-color: #0000FF;
text-decoration-color: #0000FF;
}
#rgb {
-webkit-text-decoration-color: rgb(0, 0, 255);
-moz-text-decoration-color: rgb(0, 0, 255);
-ms-text-decoration-color: rgb(0, 0, 255);
text-decoration-color: rgb(0, 0, 255);
}
#rgba {
-webkit-text-decoration-color: rgba(0, 0, 255, .5);
-moz-text-decoration-color: rgba(0, 0, 255, .5);
-ms-text-decoration-color: rgba(0, 0, 255, .5);
text-decoration-color: rgba(0, 0, 255, .5);
}
#hsl {
-webkit-text-decoration-color: hsl(240, 100%, 50%);
-moz-text-decoration-color: hsl(240, 100%, 50%);
-ms-text-decoration-color: hsl(240, 100%, 50%);
text-decoration-color: hsl(240, 100%, 50%);
}
#hsla {
-webkit-text-decoration-color: hsla(240, 100%, 50%, .5);
-moz-text-decoration-color: hsla(240, 100%, 50%, .5);
-ms-text-decoration-color: hsla(240, 100%, 50%, .5);
text-decoration-color: hsla(240, 100%, 50%, .5);
}
#transparent {
-webkit-text-decoration-color: transparent;
-moz-text-decoration-color: transparent;
-ms-text-decoration-color: transparent;
text-decoration-color: transparent;
}