最直接给文字加下划线用 text-decoration: underline；需注意继承、语义（禁用标签）、偏移与粗细控制（text-underline-offset/text-decoration-thickness）、多行中断及字体差异。
用 text-decoration: underline 最直接
绝大多数情况下，给一行文字加下划线就是设置 CSS 的 text-decoration 属性。它默认作用于行内内容，天然适合单行文本。
常见错误是只写 text-decoration: underline 却没考虑继承或干扰——比如父元素用了 text-decoration: none，子元素不会自动“恢复”下划线；或者用了 text-decoration-line: underline（CSS Text Decoration Level 3 写法），但老浏览器不认。
- 推荐写法：
text-decoration: underline（兼容性好，IE6+ 都支持） - 如果要控制颜色或样式，用完整写法：
text-decoration: underline solid #007bff（颜色和线型可选） - 避免在链接外滥用：用户可能误判为可点击内容，尤其移动端没有 hover 提示
为什么不用 <u></u> 标签
<u></u> 在 HTML5 中语义已变——它不再表示“单纯装饰性下划线”，而是专用于标注拼写错误、专有名词、中文专名号等有特定含义的文本。浏览器默认仍渲染为下划线，但语义错位会干扰可访问性（如屏幕阅读器可能跳过或特殊播报）。
- 纯视觉需求？坚决用 CSS，别用
<u></u> - 真要标专有名词（比如人名、地名在古籍中）？可以，但得配合
class和 ARIA 注释 - 旧项目里看到
<u></u>，大概率是历史遗留，不是规范做法
下划线离文字太远或太粗？调 text-underline-offset 和 text-decoration-thickness
默认下划线位置和粗细由字体决定，不同字体差异明显（比如思源黑体比 Helvetica 下划线更低）。Chrome 89+、Firefox 70+、Safari 15.4+ 支持精细控制，但必须注意兼容性断层。
立即学习“前端免费学习笔记（深入）”；
-
text-underline-offset: 2px：上移下划线（负值下移），避免和 descender（如 g、y 的下延笔画）重叠 -
text-decoration-thickness: 1px：设固定粗细；auto是默认行为，实际粗细随字体变化 - 不支持这些属性的老浏览器会退回到默认下划线，无报错，但效果不可控
- 慎用百分比值：
text-underline-offset: 0.1em在小字号下可能偏移过小，肉眼难察觉
行内元素换行后下划线中断？检查 display 和 white-space
下划线本质是“行内渲染效果”，一旦文字因宽度不足换行，text-decoration 默认会在每行末端截断，不会跨行连续。这不是 bug，是规范行为。
- 想让多行文字都有下划线？不需要额外操作——只要容器够宽、文字没强制换行，下划线自然连续
- 如果用了
display: inline-block或float拆分内容，下划线会按块分别渲染，看起来“断开” - 用
white-space: nowrap强制单行？小心溢出容器，需配合overflow: hidden或text-overflow: ellipsis - 真正需要跨行连续下划线的场景极少，通常意味着设计本身有问题（比如长标题不该靠下划线强调）
最常被忽略的是字体对下划线位置的隐式影响——同一段 CSS，在 macOS 的 San Francisco 和 Windows 的微软雅黑下，text-underline-offset 的表现可能差 1–2 像素。真要像素级对齐，得结合 @supports 做渐进增强，而不是指望一个值打遍天下。
