最直接的写法是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 在干扰基线。










