This property specifies the color of text decoration (underlines, overlines and line-throughs) set on the element with text-decoration-line.
The default value for the text-decoration-color property is currentColor, which, as the name suggests, sets the color of the text decoration to the current color applied to the text using the color property, which could be inherited if no specific value is set.
Official Syntax
-
Syntax:
text-decoration-color: <color>
- Initial: currentColor
- Applies To: all elements
- Animatable: yes, as a <color>
Values
- <color>
-
The color value accepts various keywords and numeric notations. See
<color>values for more details.
Examples
The following snippet sets an underline decoration (using the text-decoration-line property) on all h1 elements in a page and colors the underline red.
h1 {
text-decoration-line: underline;
text-decoration-color: red;
}
Other examples:
p {
text-decoration-color: #eee;
}
.overlined-text {
text-decoration-line: overline;
text-decoration-color: rgba(0,0,0,0.25);
}
Live Demo
View this demo on the Codrops PlaygroundBrowser Support
The property is currently only supported in Firefox 6+, and it needs the -moz- prefix.
