伪元素本身不防抖，但通过absolute+relative组合使其脱离文档流并配合backface-visibility: hidden可彻底消除悬停抖动。
伪元素本身不防抖，但能帮你把抖动“关进盒子”
伪元素（::before、::after）不是防抖方案，它不会阻止重排（reflow），但可以配合 position: absolute 把动画或悬停效果从文档流中抽离——这才是真正切断抖动链的关键。很多开发者误以为加个 ::after 就能稳住布局，结果发现 Logo 还是跳，原因就是没切断它和父容器的尺寸绑定关系。
为什么悬停下划线会让隔壁元素位移
典型现象：导航栏里用 ::after 做下划线，鼠标一 hover，旁边的 logo 图片就向左/向上抽动一下。这不是动画慢，而是因为：
-
::after默认是display: inline或block，参与文档流计算 - hover 时改
width或float，浏览器必须重排整个行框（line box） - 父容器高度或行高微变，连锁影响兄弟元素定位
解决路径只有一条：让伪元素彻底脱离文档流，且不牵动父容器几何尺寸。
正确写法：absolute + relative 必须成对出现
单独给 ::after 加 position: absolute 是危险操作——它会相对于 <html> 定位，直接飞走。必须同步满足两个条件：
立即学习“前端免费学习笔记（深入）”；
- 父元素（比如
<a>）显式设position: relative（哪怕没其他用途） -
::after设position: absolute，并用bottom、left、width精确锚定位置 -
::after的content必须存在，且推荐设display: block（否则宽高无效）
示例：
a {
position: relative;
}
a::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: #007bff;
transition: width 0.2s;
}
a:hover::after {
width: 100%;
}
注意：width 动画仍有轻微重排风险；更稳的做法是换 transform: scaleX(0) → scaleX(1)，但需加 transform-origin: left 对齐起点。
容易被忽略的兼容性补丁
旧版 Safari（≤15.6）和部分安卓 WebView 对 scaleX() 的亚像素渲染不稳定，缩放到 0.999 时边缘可能轻微跳动。这不是 bug，是合成器未强制启用。只需在伪元素上加一行：
a::after {
backface-visibility: hidden;
}
它不改变视觉，但会触发更稳定的 GPU 合成路径。别加在父级上，也无需配 transform: translateZ(0)——backface-visibility: hidden 单独就足够。
真正卡住人的从来不是伪元素本身，而是忘了它是个“寄生者”：没 relative 父容器，它就飘；没 backface-visibility 补丁，它就在 Safari 里抖半帧。
