absolute定位能解决悬停/动画时的布局抖动，因其将伪元素拽出文档流，避免重排；但父元素必须设position: relative作为定位上下文，且应使用transform替代width过渡，并加backface-visibility: hidden提升渲染稳定性。
为什么absolute定位能解决悬停/动画时的布局抖动
抖动不是动画本身在“晃”，而是伪元素（比如::after）或子元素在变化过程中仍参与文档流计算，导致父容器高度、兄弟元素位置被反复重排。例如nav-links ul li::after设了display: block和float，悬停时width从0%变到100%，浏览器必须重新算li的高度和内部空间分配——哪怕只偏移1px，视觉上就是“跳”。position: absolute直接把它拽出文档流，后续所有尺寸、位置变化都不再触发重排。
给伪元素加absolute前，父元素必须设relative
否则::after会相对于html定位，完全脱钩，下划线可能飞到页面任意角落。关键点就一条：li这类父容器必须显式声明position: relative（哪怕没其他用途），才能成为::after的定位上下文。
- ❌ 错误写法：
.nav-links ul li::after { position: absolute; }（父元素没定位，定位基准错乱） - ✅ 正确写法：
.nav-links ul li { position: relative; } .nav-links ul li::after { position: absolute; top: 100%; left: 0; width: 0; height: 2px; } - 注意
top: 100%是让下划线紧贴li底部，left: 0对齐文字起始位，这些值要配合transform: translateX()做平滑展开，而不是改width
transition别再碰width/float，全交给transform
即使伪元素已absolute，如果还用width过渡，依然会触发paint（重绘），部分浏览器甚至因尺寸变化间接引发layout。真正零开销的做法是：初始transform: scaleX(0)，悬停时transform: scaleX(1)，配合transform-origin: left控制缩放起点。
- 避免写
transition: width 0.3s，改用transition: transform 0.3s ease - 不要混用
scaleX和width，后者残留的布局语义会让浏览器不敢彻底跳过paint - 如果需要下划线从中间向两边展开，用
transform: scaleX(0) translateX(-50%)→transform: scaleX(1) translateX(-50%)，保持锚点居中
容易被忽略的兼容性细节
旧版 Safari 或某些安卓 WebView 对transform缩放的亚像素渲染不稳，小数宽度（如scaleX(0.999)）可能导致边缘模糊或轻微抖动。此时加backface-visibility: hidden能强制启用更稳定的合成路径。
立即学习“前端免费学习笔记（深入）”；
-
.nav-links ul li::after { backface-visibility: hidden; }（单行生效，无需3D上下文） - 不用
translateZ(0)或will-change——伪元素生命周期短，加了反而增加图层创建开销 - 真正在意首帧精准对齐时，检查
li是否设置了line-height或padding，它们会影响absolute伪元素的top计算基准
