text-decoration-color
CSS
property sets the color of decorations added to text by
text-decoration-line
.
The color applies to decorations, such as underlines, overlines, strikethroughs, and wavy lines like those used to mark misspellings, in the scope of the property's value.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
CSS does not provide a direct mechanism for specifying a unique color for each line type. This effect can nevertheless be achieved by nesting elements, applying a different line type to each element (with the
text-decoration-line
property), and specifying the line color (with
text-decoration-color
) on a per-element basis.
/* <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;
<color>
The color of the line decoration.
It is important to ensure that the contrast ratio between the color of the text, the background the text is placed over, and the text decoration line is high enough that people experiencing low vision conditions will be able to read the content of the page. Color contrast ratio is determined by comparing the luminosity of the text and background color values.
Color alone should not be used to convey meaning. For example, change of text and text-decoration-color alone is not enough to indicate a link has focus.
| 初始值 |
currentcolor
|
|---|---|
| 适用于 |
所有元素。它还适用于
::first-letter
and
::first-line
.
|
| 继承 | no |
| 计算值 | computed color |
| 动画类型 | a color |
<color>where
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )where
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
<p>This paragraph has <s>some erroneous text</s>
inside it that I want to call attention to.</p>
p {
text-decoration-line: underline;
text-decoration-color: cyan;
}
s {
text-decoration-line: line-through;
text-decoration-color: red;
text-decoration-style: wavy;
}
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS Text Decoration Module Level 3
The definition of 'text-decoration-color' in that specification. |
候选推荐 |
Initial definition. The
text-decoration
property is now a shorthand to define multiple related properties.
|
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
text-decoration-color
|
Chrome 完整支持 57 | Edge 完整支持 79 |
Firefox
完整支持
36
|
IE 不支持 No | Opera 完整支持 44 | Safari 完整支持 12.1 | WebView Android 完整支持 57 | Chrome Android 完整支持 57 |
Firefox Android
完整支持
36
|
Opera Android 完整支持 43 | Safari iOS 完整支持 12.2 | Samsung Internet Android 完整支持 7.0 |
完整支持
不支持
要求使用供应商前缀或不同名称。
text-decoration
shorthand property instead.
<color>
data type
background-color
,
border-color
,
outline-color
,
text-decoration-color
,
text-emphasis-color
,
text-shadow
,
caret-color
，和
column-rule-color