text-underline-offset 可精确控制下划线与基线距离，解决 font-size 和字体差异导致的线条偏移；配合 text-decoration-thickness 可固定线宽，避免粗细不一；旧浏览器可用伪元素降级。
text-decoration 线条位置被 font-size 拉偏了
浏览器渲染 text-decoration（比如 underline）时，下划线的垂直位置不是固定在基线以下某个像素值，而是基于当前 font-size 和字体的 metrics（如 ascent/descent、underline position/offset）动态计算的。所以当你调大 font-size，尤其换用不同字体（如 "PingFang SC" vs "Consolas"），下划线可能突然“下沉”或“上浮”，甚至贴着文字底部、穿进字形里。
用 text-underline-offset 控制下划线离基线的距离
text-underline-offset 是现代 CSS 中最直接的解法，它允许你显式设置下划线与基线之间的距离。注意它不改变线宽，只调位置：
h1 {
font-size: 24px;
text-decoration: underline;
text-underline-offset: 4px; /* 向上抬高 4px */
}
<p>code {
font-size: 16px;
font-family: "SFMono-Regular", Consolas, monospace;
text-decoration: underline;
text-underline-offset: 2px; /<em> 等宽字体通常需要更小 offset </em>/
}- 值支持
px、em、rem，也支持auto（回退到浏览器默认逻辑） - 负值可行（如
-1px），但容易让线穿过字母笔画（如g、y的 descender 部分） - Chrome 89+、Firefox 70+、Safari 15.4+ 支持；旧版 Safari 需加
-webkit-text-underline-offset
font-size 变化时下划线粗细不一致？用 text-decoration-thickness
默认下划线粗细随 font-size 缩放（约是 font-size / 14），导致小字号文字下划线过细、大字号又太粗。用 text-decoration-thickness 锁定线宽：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
p {
font-size: 18px;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1.5px; /* 固定 1.5px，不随字号变 */
}
<p>small {
font-size: 12px;
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1.5px; /<em> 同样粗细，视觉更统一 </em>/
}- 值可设
auto（默认）、from-font（取字体内置推荐值）、具体长度单位 - 和
text-underline-offset一样，需考虑 Safari 兼容性，必要时补-webkit-text-decoration-thickness - 别滥用超粗线（如
3px），会破坏文本可读性，尤其对色觉障碍用户
兼容老浏览器：用伪元素模拟下划线
如果必须支持 IE 或旧版 Safari（text-underline-offset 完全不可用），用 ::after 伪元素手动画线是最稳妥的降级方案：
立即学习“前端免费学习笔记（深入）”；
a.legacy-underline {
position: relative;
text-decoration: none;
color: #0066cc;
}
<p>a.legacy-underline::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 2px; /<em> 手动控制离文字底部距离 </em>/
height: 1px;
background-color: currentColor;
}- 好处：完全可控，
bottom和height不受字体 metrics 干扰 - 缺点：不能自动跟随文字换行（多行文本需额外处理
display: inline-block+width: 100%） - 注意
currentColor继承父级文字颜色，避免硬编码颜色值
实际项目中，优先用 text-underline-offset + text-decoration-thickness 组合；只有当目标环境明确包含大量旧 Safari 时，才引入伪元素 fallback。字体 metrics 是黑盒，别试图靠猜 font-size 倍数来调线位——测一百次也不如一个 text-underline-offset: 3px 来得稳。
