轻松用HTML编辑网页实现特定行内文字的下划线颜色自定义-html教程-PHP中文网

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

轻松用html编辑网页实现特定行内文字的下划线颜色自定义

HTML里``标签的下划线颜色不能直接设

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

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

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

实操建议：

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

用span包裹目标文字，避免语义污染（已不推荐用于纯样式）
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>}