Chrome 120前需启用实验标志才支持text-decoration-color，旧版直接忽略；必须配合text-decoration-line等成组使用，推荐text-decoration: underline solid red；iOS Safari需15.4+；伪元素方案有定位和性能问题。
text-decoration-color 在 Chrome 里不生效？先查浏览器支持范围
这个属性在 Safari 和 Firefox 里支持得早且稳，但 Chrome 直到 120 版本才默认开启（之前需手动启用 chrome://flags/#enable-experimental-web-platform-features）。如果你用的是旧版 Chrome 或 Edge，text-decoration-color 会被直接忽略，连 fallback 都不会触发——它不是“失效”，而是压根没被解析。
- 检查当前浏览器版本：
navigator.userAgent或直接在地址栏输chrome://version - 兼容性兜底必须写：
text-decoration基础样式不能省，比如text-decoration: underline;，否则即使颜色生效，下划线本身也可能不出现 - 注意：iOS Safari 对
text-decoration-color的支持从iOS 15.4开始，低于此版本会静默丢弃
和 text-decoration-line、text-decoration-style 搭配时的优先级陷阱
这三个属性属于同一逻辑组，但渲染引擎处理顺序有隐式依赖。如果只设了 text-decoration-color: red; 而没显式声明 text-decoration-line: underline;，部分旧版 Firefox 会拒绝绘制任何装饰线——颜色再对也没用。
- 必须成组使用，推荐写法：
text-decoration: underline solid red;（单条声明覆盖全部） - 若用分开写法，顺序无关紧要，但缺一不可：
text-decoration-line、text-decoration-style、text-decoration-color都得显式指定 -
text-decoration-style: wavy在 Safari 中对颜色支持不稳定，建议改用solid或dotted保底
伪元素替代方案：::after 能绕过兼容性问题，但带来新坑
当目标环境明确不支持 text-decoration-color（比如要兼容 IE 或 Android 4.4 Webview），用 ::after 模拟下划线是常见做法，但它本质是绝对定位覆盖，和原生文本装饰行为不一致。
- 行高变化时容易错位：必须监听
line-height或字体大小变更，手动重算bottom值 - 换行文本会断裂：原生
text-decoration自动跨行，::after默认只画在第一行末尾 - 性能隐患：大量使用会导致复合层激增，滚动卡顿，尤其在移动端
- 示例最小可用写法：
span { position: relative; }<br>span::after { content: ''; position: absolute; bottom: 2px; left: 0; right: 0; height: 1px; background: red; }
颜色值别用 currentColor 做动态继承？小心循环引用
看起来很优雅：text-decoration-color: currentColor;，让下划线自动跟随文字色。但某些场景下会意外失效——比如父元素设置了 color: inherit，而祖父元素没定义颜色，此时 currentColor 会回退到初始值 black，而不是你预期的“文字该有的颜色”。
立即学习“前端免费学习笔记（深入）”；
- 更稳妥的做法是用 CSS 变量：
--text-color: #333;，然后text-decoration-color: var(--text-color); - 避免在
@media查询中仅靠currentColor切换主题色，它不响应媒体查询中的颜色变更 - SVG 内嵌文本中使用
text-decoration-color时，currentColor指向的是 SVG 元素自身的color，不是外部 CSS 的上下文
