text-decoration-color
text-decoration-color CSS 属性设置由 text-decoration-line 添加到文本的装饰线的颜色。
该颜色应用于装饰，例如下划线、上划线、删除线和用于标记拼写错误的波浪线，在属性值的范围内。
试一试
text-decoration-color: red;
text-decoration-color: #21ff21;
text-decoration-color: rgb(255 90 255);
text-decoration-color: hsl(70 100% 40%);
text-decoration-color: currentColor;
<section id="default-example">
<p>
I'd far rather be
<span class="transition-all" id="example-element">happy than right</span>
any day.
</p>
</section>
p {
font: 1.5em sans-serif;
}
#example-element {
text-decoration-line: underline;
}
CSS 没有提供直接机制来为每种线条类型指定唯一的颜色。然而，可以通过嵌套元素、为每个元素应用不同的线条类型（使用 text-decoration-line 属性）以及按元素指定线条颜色（使用 text-decoration-color）来实现此效果。
语法
css
/* <color> values */
text-decoration-color: currentColor;
text-decoration-color: red;
text-decoration-color: #00ff00;
text-decoration-color: rgb(255 128 128 / 50%);
text-decoration-color: transparent;
/* Global values */
text-decoration-color: inherit;
text-decoration-color: initial;
text-decoration-color: revert;
text-decoration-color: revert-layer;
text-decoration-color: unset;
值
<color>-
装饰线的颜色。
无障碍
务必确保文本颜色、文本所在背景以及文本装饰线之间的对比度足够高，以便视力低下的人能够阅读页面内容。颜色对比度通过比较文本和背景颜色的亮度值来确定。
不应单独使用颜色来传达含义。例如，仅改变文本和文本装饰颜色不足以指示链接获得焦点。
正式定义
| 初始值 | currentcolor |
|---|---|
| 应用于 | 所有元素。也适用于 ::first-letter 和 ::first-line。 |
| 继承性 | 否 |
| 计算值 | computed color |
| 动画类型 | 一种颜色 |
正式语法
text-decoration-color =
<color>
示例
基本示例
html
<p>
This paragraph has <s>some erroneous text</s> inside it that I want to call
attention to.
</p>
css
p {
text-decoration-line: underline;
text-decoration-color: cyan;
}
s {
text-decoration-line: line-through;
text-decoration-color: red;
text-decoration-style: wavy;
}
规范
| 规范 |
|---|
| CSS 文本装饰模块级别 3 # text-decoration-color 属性 |
浏览器兼容性
加载中…
另见
- 当同时设置多个线条装饰属性时，使用
text-decoration简写属性可能更方便。 <color>数据类型- 其他与颜色相关的属性：
background-color、border-color、outline-color、text-emphasis-color、text-shadow、caret-color和column-rule-color