我们的志愿者还没有将这篇文章翻译为 中文 (简体)。加入我们帮助完成翻译!
Summary
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 | WindowTextwhere
<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. |