HTML中如何使用text-decoration-color自定义装饰线颜色-html教程-PHP中文网

text-decoration-color无效的主因是未显式设置text-decoration-line或text-decoration简写；必须成组使用，如text-decoration: underline solid red，且颜色须置于简写末位。

html中如何使用text-decoration-color自定义装饰线颜色

必须同时设置 text-decoration-line（或 text-decoration 简写），否则 text-decoration-color 无效。

为什么 `text-decoration-color` 没生效？

最常见的原因是只写了颜色，没声明装饰线类型。浏览器不会“猜”你要给哪条线设色——哪怕元素已有默认下划线（比如 a 标签），也必须显式指定 text-decoration-line: underline 或等效简写。

text-decoration-color: red; 单独使用 → 完全被忽略
text-decoration: underline; text-decoration-color: red; → 正常生效
text-decoration: underline solid red; → 一行搞定，推荐
若用了 text-decoration: line-through overline;，text-decoration-color 会同时作用于两条线，无法单独控制其中一条

`text-decoration` 简写里颜色位置很关键

简写语法是 text-decoration: <line> [<style>] [<color>];</style></line>，颜色必须放在最后。顺序错就失效：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

✅ text-decoration: underline solid #007bff;
✅ text-decoration: overline dotted orange;
❌ text-decoration: red underline; → 浏览器当无效声明处理
❌ text-decoration: underline red dotted; → dotted 被忽略，red 可能也不生效

老浏览器（Safari ≤12、IE、部分安卓 WebView）怎么兜底？

这些环境直接无视 text-decoration-color，下划线会回退成文字色（通常是黑色）。不能靠 @supports 完全覆盖，因为 Safari 12.0 声称支持但实际有 bug，12.1 才稳定。

首选伪元素方案：用 ::after 绝对定位画线，可精确控制颜色、粗细、离基线距离（如 bottom: 0.2em）
慎用 border-bottom：对内联元素需加 display: inline-block，否则破坏行高；换行时只在首行生效，box-decoration-break: clone 兼容性差
JS 动态检测不实用：CSS 层面已失效，JS 读不到计算值，也无法“修复”渲染

真正麻烦的不是写法，而是基线对齐——text-decoration-color 的下划线位置由字体决定，不同字体 descender 高度不同，而 border-bottom 或伪元素需要手动调 bottom，这点很容易被忽略。