text-decoration-color不生效主因是浏览器兼容性差且需先声明text-decoration；推荐用border-bottom或::after伪元素替代，避免复合写法混用。
text-decoration-color 不生效的常见原因
直接写 text-decoration-color: red 却看不到红色下划线，大概率不是代码写错了，而是浏览器根本不认这个属性。IE 全系列完全不支持；Chrome 57 前、Firefox 36 前、Safari 12.1 前也一律忽略。即使现代浏览器，若元素没显式声明 text-decoration: underline（或 overline/line-through），text-decoration-color 也不会起作用——它只修饰“已存在的装饰线”，不是独立生效的样式。
用 border-bottom 模拟下划线最稳妥
这是兼容性最好、行为最可控的 fallback 方案，尤其适合需要支持 IE11 或老版 Android WebView 的项目。
-
text-decoration: none必须显式写出，否则原生下划线可能和border-bottom叠加出现双线 -
border-bottom的颜色、粗细、间距全由你控制，不受字体度量干扰 - 若需对齐文字基线，用
padding-bottom或line-height微调，比依赖text-underline-offset更可靠（后者在 Safari 对负值支持不稳定）
示例：
span.link {
color: #007bff;
text-decoration: none;
border-bottom: 2px solid #dc3545;
padding-bottom: 2px;
}
用 ::after 伪元素实现高级效果
当需要波浪线、渐变色下划线、hover 动画，或精确控制下划线长度（比如只装饰部分文字）时，::after 是唯一可行路径。
立即学习“前端免费学习笔记（深入）”；
- 必须设
position: relative在父元素上，::after才能精确定位 - 用
content: ""+display: block+width控制长度，bottom和left调整位置 - 无法继承父元素的文本颜色，
border-bottom-color或background需手动指定 - 注意：伪元素不适用于内联元素换行场景，断行后下划线会丢失
示例（单行纯色下划线）：
a {
position: relative;
text-decoration: none;
color: #000;
}
a::after {
content: "";
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg, #ff6b6b, #4ecdc4);
}
现代浏览器里别混用复合写法和独立属性
像 text-decoration: underline red wavy 这种写法看着省事，但一旦后续又写了 text-decoration-color: blue，旧规则会被覆盖——而且不同浏览器解析顺序不一致，容易出错。
- 推荐统一用独立属性：明确写
text-decoration-line、text-decoration-color、text-decoration-style、text-underline-offset -
text-decoration-thickness目前兼容性仍较差（尤其 Safari），慎用像素值，auto或from-font更安全 - 若用 CSS-in-JS 或构建工具，注意 autoprefixer 默认不处理
text-decoration-color，需手动配置插件支持
真正麻烦的从来不是“怎么写”，而是“什么时候该放弃原生装饰、改用 border 或伪元素”——这点在混合字体、多语言排版、或需要像素级对齐的 UI 中尤为明显。
