W3cubDocs

text-decoration-color

The CSS text-decoration-color property sets the line color used when drawing underlines, overlines, and strikethrough lines specified by the corresponding text-decoration-line property. The color specified will be the same for all three line types.

CSS does not provide a direct mechanism for specifying a unique color for each line type. This effect can nevertheless be achieved by nesting markup elements, applying a different line type to each element (via the text-decoration-line property), and specifying the line color (via text-decoration-color) on a per‐element basis.

Initial value	`currentColor`
Applies to	all elements. It also applies to `::first-letter` and `::first-line`.
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 `rgba(0,0,0,0)`.
Animation type	a color
Canonical order	the unique non-ambiguous order defined by the formal grammar

Syntax

/* <color> values */
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;

/* Global values */
text-decoration-color: inherit;
text-decoration-color: initial;
text-decoration-color: unset;

Values

<color>: The color property accepts various keywords and numeric notations. See <color> values for more details.

Formal syntax

<color>where 
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
where 
<rgb()> = rgb( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = <ident>
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowText
where 
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>

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>

Specifications

Specification	Status	Comment
CSS Text Decoration Level 3 The definition of 'text-decoration-color' in that specification.	Candidate Recommendation	Initial definition. The `text-decoration` property wasn't a shorthand before.

Browser compatibility

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	No support	6.0 (6.0) - 39.0 (39.0)-moz 36.0 (36.0) without prefix	No support	No support	7.1 -webkit

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	No support	6.0 (6.0) - 39.0 (39.0)-moz 36.0 (36.0) without prefix	No support	No support	8 -webkit

Edit this page on MDN

© 2005–2017 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color