Definition and Usage
The text-decoration-color CSS property sets the color used when drawing underlines, overlines, or strike-throughs specified by text-decoration-line. This is the preferred way to color these text decorations, rather than using combinations of other HTML elements.
- Initial currentColor
- Applies to all elements
- Inherited no
- Media visual
- Computed Value If the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgb(0,0,0).
- Animatable yes, as a color
- Canonical order the unique non-ambiguous order defined by the formal grammar
Syntax
Formal syntax: <color>
text-decoration-color: currentColor text-decoration-color: red text-decoration-color: #00ff00 text-decoration-color: rgba(255, 128, 128, 0.5) text-decoration-color: transparent text-decoration-color: inherit
Values
- <color>
- The color property accepts various keywords and numeric notations. See <color> values for more details.
Examples
.example { text-decoration: underline; text-decoration-color: red; }
The example above has the same effect as the following code, which also adds a hover style.
<!DOCTYPE html> <html> <head> <style> .example { font-size: 24px; text-decoration: underline; color: red; } .example:hover { color: blue; text-decoration: line-through; } </style> </head> <body> <span class="example"> <span style="color:black">black text with red underline and blue hover</span> </span> </body> </html>
Compatibility
Desktop browsers
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | Not supported | 6.0 (6.0)-moz | Not supported | Not supported | Not supported (537.33) -webkit |
Mobile browsers
Feature | Android | Firefox mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | Not supported | 6.0 (6.0)-moz | Not supported | Not supported | Not supported |