网页下划线颜色由css的text-decoration-color控制，需配合text-decoration-line: underline使用，仅现代浏览器支持；vs code中的下划线是编辑器提示，与网页渲染无关。
VS Code 中网页下划线颜色由 CSS text-decoration-color 控制
VS Code 本身不渲染网页，你在编辑 HTML/CSS 文件时看到的下划线（比如拼写检查、语法提示），和浏览器里网页实际显示的下划线是两回事。你真正想改的，是浏览器中用 CSS 渲染出的下划线颜色——这只能靠写 CSS 实现，不是 VS Code 设置能管的。
常见错误现象：text-decoration: underline 写了但颜色没变，是因为默认继承文字颜色，且老版本浏览器不支持 text-decoration-color。
-
text-decoration-color是唯一标准方式，但只在现代浏览器（Chrome 57+、Firefox 36+、Safari 12.1+）生效 - 如果要兼容旧版 Safari 或 IE，得用
border-bottom模拟下划线（颜色可控，但位置/粗细/间距需手动调） - 别试图在 VS Code 的
settings.json里搜 “underline color” —— 那些全是编辑器内部高亮（如波浪线报错），和网页无关
怎么用 text-decoration-color 改下划线颜色
它必须和 text-decoration-line: underline 一起用，单独写无效。顺序不重要，但缺一不可。
span.highlight {
text-decoration-line: underline;
text-decoration-color: #ff6b6b;
text-decoration-style: solid; /* 可选：wavy / dotted / dashed */
}- 支持所有 CSS 颜色值：
#fff、rgb(255, 0, 0)、var(--accent)都行 -
text-decoration-style影响样式，但不影响颜色；若设为none，下划线直接消失 - 注意层级：如果父元素有
text-decoration，子元素可能被继承覆盖，建议显式重置
为什么有时候改了没反应
最常见原因是浏览器不支持或 CSS 优先级被覆盖。不是代码写错了，而是环境或规则没对上。
- 检查浏览器版本：Edge 16+、Chrome 57+ 才原生支持
text-decoration-color - 用 DevTools 查看 computed 样式，确认
text-decoration-color是否被标记为 “invalid” 或灰色（说明不支持） - 如果用了 CSS 预处理器（如 Sass），确保编译后输出的是标准属性名，而不是漏掉了
-webkit-前缀（其实不需要前缀） - 某些 UI 框架（如 Bootstrap）会全局重置
text-decoration，得提高选择器权重或加!important（慎用）
替代方案：用 border-bottom 模拟下划线
当兼容性是硬需求，或者你需要更精细控制（比如下划线离文字距离），border-bottom 更可靠。
a.fancy-link {
border-bottom: 2px solid #4ecdc4;
padding-bottom: 2px; /* 避免文字贴边 */
text-decoration: none; /* 关掉原生下划线 */
}- 颜色、粗细、圆角、虚线都完全可控，且兼容 IE8+
- 缺点是：不能自动跟随文字换行（长文本折行时，border 会断开），也不能像
text-decoration那样自动避开 descender（如 g、y 的下延部分） - 如果真要模拟原生效果，得配合
background-image: linear-gradient()+background-size，但复杂度陡增，一般没必要
改颜色这事本身简单，难的是分清「编辑器里看到的」和「浏览器里跑出来的」——很多人卡在这一步，对着 VS Code 设置调半天，其实该打开浏览器开发者工具看元素样式。
