HTML文字下划线设置方法及代码示例

光写 text-decoration: underline 是懒办法。真正好用的组合得带 text-underline-offset 和 text-decoration-color：

span.highlight {
  text-decoration: underline;
  text-decoration-color: #007bff;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

• text-underline-offset 控制线离文字的距离，建议设 3px～6px，避开 descender
• text-decoration-thickness 别用 auto（太细），显式设 1.5px 或 2px 更稳
• text-decoration-color 必须显式声明，否则继承文字颜色，换主题时容易失效
• 老版 Safari 不支持 text-underline-offset，可以用 border-bottom 降级（见下条）

兼容性差时用 border-bottom 替代的坑

当要支持旧 Safari 或某些邮件客户端，border-bottom 是更稳妥的选择，但它不是“下划线”，是“底线”，行为完全不同：

• 高度算进行高（line-height），可能撑开段落，需手动调 padding-bottom 补偿
• 没法自动对齐到文字 baseline，得靠 transform: translateY() 微调，比如 transform: translateY(2px)
• 遇到换行文字，border-bottom 会断在行尾，而 text-decoration 自动跨行连续
• 别用 margin-bottom 模拟间距——它会把下一行也推开，破坏排版流

复杂点在于：你得根据是否需要跨行连续、是否要适配旧 Safari、是否允许微调偏移量，来决定用哪套方案。选错了，轻则下划线压字，重则整段行高崩掉。

理论要掌握，实操不能落！以上关于《HTML文字下划线设置方法及代码示例》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！