HTML原生<u>标签无法直接设置下划线颜色，因其仅具语义功能且不继承文字颜色；须用text-decoration和text-decoration-color组合控制，且需同时声明类型与颜色才生效。

HTML里<u>标签的下划线颜色不能直接设

想用原生<u>标签改下划线颜色？不行。HTML规范里<u>只语义化“非标准文本”，不提供样式控制，浏览器默认用text-decoration-color但仅在支持该CSS属性的前提下生效，且<u>本身不继承父级颜色——所以直接写<u style="color: red">文字</u>只会变文字色，下划线还是黑色/默认色。

用text-decoration + text-decoration-color最稳妥

现代浏览器（Chrome 64+、Firefox 70+、Edge 79+）都支持组合设置，关键点是：必须同时声明装饰线类型和颜色，否则颜色无效。

实操建议：

anything-to-html

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

下载

• 用span包裹目标文字，避免语义污染（<u>已不推荐用于纯样式）
• CSS中必须写全：text-decoration: underline; text-decoration-color: #ff6b6b;
• 若要控制下划线位置或粗细，加text-underline-offset和text-decoration-thickness（注意兼容性：后者在Safari 15.4+才稳定）
• 示例：

  <span style="text-decoration: underline; text-decoration-color: #ff6b6b; text-underline-offset: 2px;">红色下划线文字</span>

IE或老版本浏览器 fallback 方案

IE完全不支持text-decoration-color，Safari 15.3及更早也仅部分支持。这时候得用伪元素模拟：

立即学习“前端免费学习笔记（深入）”；

• 给span设position: relative;
• 用::after生成绝对定位的bottom: -2px;横线，宽100%，高1px，背景色即所需下划线色
• 需手动处理换行问题（display: inline-block可能破坏行内流，慎用）
• 示例CSS：

  span.underline-red { position: relative; }<br>span.underline-red::after {<br>  content: '';<br>  position: absolute;<br>  bottom: -2px;<br>  left: 0;<br>  width: 100%;<br>  height: 1px;<br>  background-color: #ff6b6b;<br>}

别忽略text-decoration-skip-ink带来的视觉断点

现代浏览器默认启用skip-ink（跳过文字笔画，让下划线在字母g、y等下降部处断开），这会让自定义颜色下划线看起来“不连贯”。如果设计要求严格连续线条：

• 显式关闭它：text-decoration-skip-ink: none;
• 但注意：关闭后下划线会穿过g、j、p、q、y的下降部，可能影响可读性
• 移动端Webkit内核（如iOS Safari）对skip-ink支持不一致，测试时务必真机检查

实际项目里，优先走text-decoration-color路线；兼容性兜底不是加一层就行，得测字体、字号、行高变化下的下划线位置偏移——这点最容易被忽略。