最直接方案是用 text-decoration-color 改下划线颜色，但需配合 text-decoration-line: underline 使用，且仅现代浏览器支持；老版本 Safari 和 IE 不支持，需用 border-bottom 模拟并注意内联元素的 display 设置。
用 text-decoration-color 直接改下划线颜色
这是最直接的方案，但得确认浏览器是否支持。现代 Chrome、Firefox、Edge（Chromium 内核）都行，Safari 从 12.1 开始也支持，老 Safari 或 IE 完全不认这个属性。
关键点是：它只作用于当前元素的下划线，不会影响文字色或其它装饰线（比如 text-decoration-line: underline overline 时，text-decoration-color 只管 underline 的颜色）。
-
text-decoration-line: underline必须显式设置，否则text-decoration-color无效 - 不能单独写
text-decoration-color: red，必须和text-decoration-line配合使用 - 不支持渐变色，只接受标准颜色值（
#ff0000、red、rgb(255,0,0)等）
span.highlight {
text-decoration-line: underline;
text-decoration-color: #007bff;
}
IE 或老 Safari 怎么兼容
这些浏览器把 text-decoration-color 当成无效声明直接忽略，下划线会回退成文字默认色（通常是黑色）。真要兼容，得绕开原生下划线，用 border-bottom 模拟。
注意：border-bottom 是块级行为，对内联元素（如 <span></span>）需加 display: inline-block 或 display: inline-flex，否则会撑开整行高度。
立即学习“前端免费学习笔记（深入）”；
- 用
border-bottom时，line-height和padding-bottom会影响下划线离文字的距离 -
border-bottom无法自动避让字母 descender（比如 g、y 的下延部分），可能看起来“贴太近” - 如果文字有换行，
border-bottom默认只在首行生效；要每行都带线，得用box-decoration-break: clone（支持有限）或 JS 分段处理
span.fallback-underline {
display: inline-block;
border-bottom: 1px solid #007bff;
padding-bottom: 2px;
}
text-decoration 简写写法容易踩的坑
很多人想一行写完，用 text-decoration: underline #007bff —— 这在语法上合法，但实际效果不稳定。因为 CSS 规范里，text-decoration 简写**不包含 color**，除非你写全三参数：text-decoration: underline solid #007bff。
问题在于：solid 是线型，不是可选参数；漏掉它，浏览器可能把 #007bff 当成线型解析，导致下划线消失或变虚线。
- Chrome 会尝试容错，可能仍显示红色下划线，但 Firefox 会直接忽略整条声明
- 推荐始终拆开写：
text-decoration-line+text-decoration-color+text-decoration-style，避免歧义 - 简写中若混入旧语法（如
text-decoration: underline red），会被当成无效，整条失效
动态改下划线颜色时要注意重绘范围
用 JS 修改 element.style.textDecorationColor 是安全的，但频繁操作会触发重排（reflow）—— 尤其当元素含大量文本或位于复杂布局中时。
更轻量的做法是切换预设 class，而不是直改 style：
- 提前定义好不同颜色的 class（如
.underline-red、.underline-blue） - JS 里只做
el.classList.toggle('underline-red')，浏览器能更好优化渲染 - 如果颜色来自用户输入（比如拾色器），别实时绑定到 style，先缓存 class 名再批量更新
另外，CSS 自定义属性（--underline-color）配合 text-decoration-color: var(--underline-color) 也能实现动态，但 IE 不支持，且变量变更仍需触发样式重计算。
