
HTML 里怎么给文字加下划线
直接用 text-decoration: underline,但别只写这一行——浏览器默认下划线贴着字底,容易和字母 descender(比如 g、y、p 的下延笔画)打架,看着糊成一团。
为什么 <u></u> 标签不推荐
<u></u> 在 HTML5 里语义变了,不再是“加下划线”,而是“标注非标准文本”(比如拼写错误、专有名词注释)。用它会被屏幕阅读器读作“underline”,干扰可访问性;而且样式没法统一控制,比如不能调间距、颜色或线型。
- 语义错位:想强调内容,结果被解析成“疑似错误”
- 样式死板:
<u></u>默认是单色实线,离 baseline 太近,g和y下面那截常被盖住 - 没法单独改线颜色:比如文字黑色、下划线蓝色,
<u></u>做不到
text-decoration 的关键参数怎么配
光写 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、是否允许微调偏移量,来决定用哪套方案。选错了,轻则下划线压字,重则整段行高崩掉。










