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 就能确认：text-underline-offset 的兼容性缺口集中在：
- Safari ≤ 15.3（2022 年前）：不识别该属性，下划线位置固定不可调
- IE 所有版本：无任何支持
- Android 4.4–6.x 的系统 WebView：多数不生效
- 部分 Electron 旧版本（基于 Chromium
用 relative + 伪元素模拟 offset 的实际写法
核心思路不是“替代 position: relative”，而是用 position: relative 给父容器建定位上下文，再用 ::after 画一条可自由控制位置的线。关键点不在“相对定位本身”，而在它提供的参照能力：
- 父元素必须设
position: relative，否则::after的position: absolute会相对于定位 -
::after的bottom值就是你想要的“offset”：比如希望下划线离文字底边 6px，就设bottom: -6px - 高度别写死，用
height: 0.0625em这类相对单位，随字号缩放 - 必须声明
content: ""，否则伪元素不渲染
示例：
.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);
}
为什么不用 transform: translateY 替代 bottom
看似都能往下推，但行为差异明显：
-
bottom: -6px是相对于父元素**内边距盒底部**计算，稳定可控 -
transform: translateY(6px)是相对于元素自身原始位置偏移，而伪元素原始位置在文字 baseline 处，受字体度量影响大，多行或不同 font-family 下容易错位 - 动画时
transform性能优于bottom，但仅限于 hover 动画；静态偏移首选bottom
真正容易被忽略的是：当你用伪元素重写下划线时，text-underline-offset 就彻底失效了——它只作用于原生 text-decoration。所以不是“它不工作，我换方案”，而是“一旦选择伪元素路径，就必须放弃对该属性的所有依赖”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
