在HTML5的网页样式开发中，给文字添加删除线并自定义其颜色是提升页面视觉表现力的常用操作，核心是通过CSS的text-decoration-color属性实现，该属性专门用于设置文本装饰线（包括删除线、下划线、上划线）的颜色，配合text-decoration属性可以快速完成效果调整。
基础实现方法
要给文字添加带自定义颜色的删除线，首先需要用text-decoration属性声明删除线，再用text-decoration-color指定颜色值，两个属性可以分开写，也可以合并到text-decoration的简写属性中。
分开声明的方式
这种方式逻辑更清晰，适合新手理解，示例代码如下：
/* 给类名为del-text的元素添加红色删除线 */
.del-text {
/* 首先声明添加删除线 */
text-decoration-line: line-through;
/* 指定删除线颜色为红色 */
text-decoration-color: #ff0000;
/* 可选：设置删除线粗细，默认是1px */
text-decoration-thickness: 2px;
}
简写属性的方式
CSS3之后支持text-decoration的简写形式，可以把线类型、颜色、粗细合并到一个属性中，代码更简洁：
/* 简写形式实现蓝色删除线 */
.short-del {
/* 顺序：线类型 颜色 粗细，颜色可以省略，省略则继承文字颜色 */
text-decoration: line-through #0000ff 1.5px;
}
HTML结构配合示例
定义好CSS样式后，只需要在HTML中给对应元素添加对应的类名即可生效，完整示例如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>删除线颜色自定义示例</title>
<style>
.red-del {
text-decoration-line: line-through;
text-decoration-color: #ff0000;
text-decoration-thickness: 2px;
}
.blue-del {
text-decoration: line-through #0000ff 1.5px;
}
</style>
</head>
<body>
<p>这段文字是普通文本</p>
<p class="red-del">这段文字有红色删除线</p>
<p class="blue-del">这段文字有蓝色删除线</p>
</body>
</html>
兼容性与注意事项
text-decoration-color属性在现代浏览器中支持度较好，Chrome、Firefox、Edge等主流浏览器都支持，但旧版本的浏览器（如IE全系列）不支持该属性，如果需要兼容旧浏览器，可以使用以下替代方案：
- 用
<span>标签包裹文字，给<span>设置下边框模拟删除线，通过border-color控制颜色 - 使用伪元素
::after生成删除线，通过background-color设置颜色
另外需要注意，如果同时设置了文字颜色和删除线颜色，删除线会优先使用text-decoration-color的值，不会继承文字颜色，这一点和旧版CSS的行为有区别，开发时需要注意避免样式冲突。
常见问题解答
为什么设置了text-decoration-color没有生效？
首先检查是否同时声明了text-decoration-line: line-through，如果没有声明删除线类型，单独设置颜色是不会生效的。其次检查是否有其他CSS规则覆盖了该属性，优先级更高的规则会覆盖当前设置。
可以设置删除线的渐变颜色吗？
text-decoration-color不支持渐变值，如果需要渐变删除线，可以使用伪元素方案，给伪元素设置渐变背景，再调整位置和高度模拟删除线效果。
HTML5text_decoration_color删除线样式CSS文本装饰修改时间：2026-07-12 17:09:26