text-underline-offset在Safari ≤15.3、所有IE版本、Android 4.4–6.x WebView及部分旧版Electron中完全不支持，浏览器会静默忽略该声明。
text-underline-offset
在 Safari 15.4 之前、所有版本的 IE 和部分旧版 Android WebView 中完全不支持，不是“偏移不准”，而是压根解析不了该声明——
浏览器
会静默丢弃它。
哪些浏览器会忽略 text-underline-offset
查 CanIUse 或 MDN 就能确认：
的兼容性缺口集中在：
Safari ≤ 15.3（2022 年前）：不识别该属性，下划线位置固定不可调
IE 所有版本：无任何支持
Android 4.4–6.x 的系统 WebView：多数不生效
部分 Electron 旧版本（基于 Chromium
用 relative + 伪元素模拟 offset 的实际写法
核心思路不是“替代 position: relative”，而是用
给父容器建定位上下文，再用
画一条可自由控制位置的线。关键点不在“
相对定位
本身”，而在它提供的参照能力：
父元素必须设
，否则
的
会相对于
定位
的
值就是你想要的“offset”：比如希望下划线离文字底边 6px，就设
高度别写死，用
这类相对单位，随字号缩放
必须声明
，否则伪元素不渲染
示例：
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
立即学习
“
前端免费学习笔记（深入）
”；
为什么不用 transform: translateY 替代 bottom
看似都能往下推，但行为差异明显：
是相对于父元素**内边距盒底部**计算，稳定可控
是相对于元素自身原始位置偏移，而伪元素原始位置在文字 baseline 处，受字体度量影响大，多行或不同 font-family 下容易错位
动画时
性能优于
，但仅限于 hover 动画；静态偏移首选
真正容易被忽略的是：当你用伪元素重写下划线时，
就彻底失效了——它只作用于原生
。所以不是“它不工作，我换方案”，而是“一旦选择伪元素路径，就必须放弃对该属性的所有依赖”。
text-underline-offsetposition: relative::afterposition: relative::afterposition: absolute::afterbottombottom: -6pxheight: 0.0625emcontent: "".link {
position: relative;
text-decoration: none;
}
.link::after {
content: "";
position: absolute;
left: 0;
bottom: -6px; /* 等效于 text-underline-offset: 6px */
width: 100%;
height: 0.0625em;
background-color: currentColor;
transform-origin: left;
transition: transform 0.2s;
}
.link:hover::after {
transform: scaleX(1);
}
bottom: -6pxtransform: translateY(6px)transformbottombottomtext-underline-offsettext-decoration