text-underline-offset 下划线偏移属性
最后更新：2026-09-13
text-underline-offset text-underline-offset 下划线偏移属性
text-underline-offset 属性用于控制文本下划线与文字基线之间的距离，让下划线的位置更加灵活美观。默认情况下，下划线紧贴文字底部，通过设置偏移量可以让下划线与文字之间留出间距，避免下划线与字母下伸部分（如 g、y）重叠。
| 分类 | |
|---|---|
| 初始值 | auto |
| 继承 | 是 |
| 适用于 | |
| 可动画 | |
| CSS 版本 | CSS3 |
| 状态 | 标准 |
📝 语法
text-underline-offset: auto | <length> | <percentage>;⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
auto | 关键字 | 默认偏移 |
<length> | <percentage> | 类型 | 下划线偏移距离 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| text-underline-offset | ✓ v66 | ✓ v79 | ✓ v62 | ✓ v12.1 | ✓ v53 |
| 所有主流浏览器均支持 | |||||
提示： text-underline-offset 只影响下划线的位置，不影响上划线和删除线。
注意： 该属性需要浏览器版本较新（Chrome 66+、Firefox 62+、Safari 12.1+），旧浏览器会忽略此属性。
❓ 常见问题
Qtext-underline-offset 和 text-decoration-thickness 有什么区别？
Atext-underline-offset 控制下划线与文字的距离，text-decoration-thickness 控制下划线的粗细。两者可以配合使用，实现更精细的下划线样式。
Q百分比值是相对于什么计算的？
A相对于元素的 font-size 计算，100% 等于当前字号大小。比如字号 16px、text-underline-offset: 30% 即下移约 4.8px。也可以用数值 0 让下划线贴紧文字底部。
Q如何让下划线和文字拉开距离？
A在 text-decoration: underline 基础上加 text-underline-offset: 3px（或 0.2em），下划线会整体下移；配合 text-decoration-thickness 可同时调整粗细，做出更美观的链接下划线。
🏷️ 相关属性
💡 相关案例
📚 相关教程
