直接用 border-bottom 做滑动下划线会卡顿或跳变，因其属盒模型固有属性，无法单独过渡动画，且受 padding/margin、字体变化影响导致定位偏移；伪元素+transform: scaleX() 更优，因不触发重排，仅走合成层。
为什么直接用 border-bottom 做滑动下划线会卡顿或跳变
因为 border-bottom 是盒模型固有属性，无法单独对它做 transition 动画——浏览器实际是给整个元素的 border 计算重绘，一旦父容器有 padding/margin 或字体变化，下划线位置就容易偏移。更关键的是，border 不能脱离文字流做精准定位，hover 时宽度拉伸常出现“先缩回再展开”的闪烁。
用 ::after 伪元素 + transform: scaleX() 是更稳的方案
核心思路：伪元素默认宽度为 0，通过 scaleX(0) 隐藏；hover 时用 scaleX(1) 拉伸，配合 transform-origin: left center 控制起点。比改 width 更高效，因为 transform 不触发重排（layout），只走合成层（compositor）。
实操要点：
-
::after必须设content: ""、display: block、position: absolute - 父
<a></a>要加position: relative，否则伪元素会相对 body 定位 - 下划线高度建议用
height: 2px而非border，避免和文字 baseline 对不齐 - 过渡要写在伪元素上：
transition: transform 0.3s ease，别写在a:hover上
nav a {
position: relative;
padding: 8px 12px;
}
nav a::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: #007bff;
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.3s ease;
}
nav a:hover::after {
transform: scaleX(1);
}
如何让下划线只覆盖文字宽度而非整个 <a></a> 宽度
如果导航项有较大 padding，但你只想让下划线贴着文字滑动（比如“首页”两字宽，不是整个按钮宽），就不能用 width: 100%。
立即学习“前端免费学习笔记（深入）”；
两种解法：
- 用
width: fit-content+left: 0，但需注意 Safari 旧版本不支持fit-content - 更兼容的做法：用
transform: scaleX()配合left和right动态撑开，例如：left: 0; right: 0; transform: scaleX(0);→ hover 时transform: scaleX(1)，此时宽度由内容自然决定 - 若需精确到字符级（如中英文混排时下划线长度不一），得用 JS 测量
getBoundingClientRect().width，但纯 CSS 场景下通常fit-content已够用
移动端点击区域与伪元素的冲突怎么破
伪元素默认 pointer-events: auto，可能拦截点击，尤其当它盖住整个 <a></a> 时，iOS Safari 有时会误判为“长按复制”。
必须加：
-
pointer-events: none到a::after，确保点击穿透到底层链接 - 如果下划线需要响应点击（比如做 tab 切换），那就别用伪元素，改用真实
<span class="underline"></span>并手动控制显隐 - 另外检查
touch-action: manipulation是否被意外禁用，否则 iOS 点击延迟仍存在
真正难处理的是多层嵌套导航（如三级 dropdown）里下划线的 z-index 层叠顺序，这时伪元素的 z-index 必须显式设为 -1，且父级 a 的 z-index 得大于 0，否则会被子菜单遮住。
