最直接的写法是text-decoration: underline，它原生支持且语义清晰；需注意默认贯穿行内元素、继承性、下划线位置偏移等问题，可用text-underline-offset调整距离，兼容性需关注。
text-decoration: underline 最直接的写法
给文字加下划线，text-decoration: underline 是 css 里最常用、也最稳妥的方式。它原生支持，所有现代浏览器都认，而且语义清晰——就是“给文本加装饰线”。
常见错误现象：text-decoration 默认会贯穿整个行内元素（比如 a 标签），包括空格和换行位置；如果父容器用了 line-height 或 vertical-align，下划线位置可能偏高或偏低。
实操建议：
- 优先用
text-decoration: underline，别自己画border-bottom或伪元素——除非你要控制颜色、粗细或距离 - 下划线默认是单色、单线、紧贴文字基线，想改颜色或样式必须连写完整值，比如：
text-decoration: underline solid #007bff - 注意继承性：父元素设了
text-decoration，子元素会继承，但不会叠加；如果子元素要取消，得显式写text-decoration: none
下划线离文字太近？用 text-underline-offset 控制距离
text-underline-offset 是专门用来调上下划线和文字之间距离的属性，支持像素、em、百分比。不设时浏览器按字体自动算，结果常不一致。
立即学习“前端免费学习笔记（深入）”；
使用场景：中英文混排、自定义字体、或设计稿明确要求下划线离文字 2px。
实操建议：
- 基础写法：
text-underline-offset: 2px或text-underline-offset: 0.1em - 兼容性注意：
text-underline-offset在 safari 15.4+、chrome 99+、firefox 89+ 才稳定支持；旧版本会忽略，但至少不报错 - 别和
text-decoration-thickness混用却不设 offset——厚度变大后，下划线会更“压”文字，视觉上像贴得太紧
a 标签下划线去不掉？检查 text-decoration-line 和 color
很多同学发现给 a 标签写了 text-decoration: none 还是有下划线，大概率是没覆盖到伪类状态，或者被其他规则层叠覆盖了。
常见错误现象：a:hover 有下划线，但 a:link 没写；或者用了 color: inherit 导致链接色和文字色一样，误以为“没生效”，其实下划线还在。
实操建议：
- 清干净必须写全四个伪类：
a, a:link, a:visited, a:hover, a:active { text-decoration: none; } - 检查是否被更高权重的选择器覆盖，比如
.nav a比a权重高，光写a { ... }不起作用 - 如果只是想让下划线变淡，别只调
color，要同步设text-decoration-color，否则下划线还是默认色
需要双线、波浪线或虚线下划线？看 text-decoration-style 和 text-decoration-line
text-decoration-style 决定线型（solid / dotted / dashed / wavy / double），text-decoration-line 决定画在哪（underline / overline / line-through），两者需配合 text-decoration 简写或一起声明才生效。
性能 / 兼容性影响：波浪线（wavy）在部分低配安卓 webview 中渲染卡顿；double 在小字号下可能糊成一块。
实操建议：
- 简写推荐：
text-decoration: underline wavy red（顺序固定：line style color） - 单独改样式必须连带 line 值，比如只写
text-decoration-style: wavy是无效的 - 波浪线用于拼写错误提示很合适，但别用在正文链接上——可访问性工具可能识别为错误标记
真正容易被忽略的是：下划线不是“画出来就完事”，它参与行高计算、受字体度量影响、在缩放或系统字体设置变化时行为不一致。如果你的下划线在某些设备上突然偏移或消失，先查 text-underline-offset 是否被重置，再确认有没有父级 transform 或 font-size-adjust 在干扰基线。