用 ::before 更稳妥，因其在内容层下方不遮文字；推荐 transform: scaleX() 动画提升性能，需设 height 和 transform-origin；鼠标快速进出需统一 transition 控制中断；移动端需用 @media 或 JS 适配。
按钮悬停时背景从左向右推入，用 ::before 还是 ::after？
用 ::before 更稳妥。它默认在内容层下方，不会遮挡文字；而 ::after 在上方，容易因 z-index 或 pointer-events 引发点击穿透或文字闪烁。实际项目里，::before 是默认选择，除非你明确需要伪元素盖在文字上做遮罩或叠加效果。
关键点：
-
::before必须设content: ""，否则不渲染 - 需显式设置
position: absolute和父容器position: relative - 宽度初始为
0，transform: scaleX(0)也可，但后者对文字抗锯齿略不友好
transform: scaleX() 和 width 动画哪个更推荐？
width 动画兼容性好，但会触发重排（layout），尤其在低性能设备上卡顿明显；transform: scaleX() 只走合成器，GPU 加速，性能更好——但必须确保伪元素有固定高度（比如 height: 100%），否则缩放会失真。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用
transform: scaleX(0)→transform: scaleX(1) - 给伪元素加
transform-origin: left center，避免缩放中心偏移 - 若要圆角过渡自然，
border-radius必须写在伪元素上，且保持不变（不能在动画中改）
为什么鼠标快速进出时背景“抽搐”或“卡住”？
这是 hover 动画没加 transition 中断控制导致的。CSS 默认不会自动取消正在进行的动画，鼠标反复划过时，多个 transform 值被排队执行，视觉上就抖。
解决方法很简单：
- 给伪元素加统一的
transition: transform 0.3s ease（不要拆成transition-property+transition-duration） - hover 状态下只改
transform，别同时改width和transform - 避免用
:hover:hover或嵌套伪类，IE/旧 Safari 会失效
移动端点击无反应？touch-action 要不要配？
要。iOS Safari 对 :hover 的支持很保守：只有第一次触摸后才激活 hover，之后再点就不触发。这不是 bug，是规范行为。单纯靠 :hover 做悬停效果，在 iPhone 上大概率“点一次有效、再点无效”。
务实做法：
- 用
@media (hover: hover) and (pointer: fine)包裹纯 hover 效果，隔离触屏设备 - 移动端改用
:active模拟按压反馈（哪怕只是 0.1s 的transform: scale(0.98)） - 如果必须让触屏也走推入效果，得配合 JS 监听
touchstart并加临时 class，touch-action: manipulation可减少延迟，但不能替代逻辑
真正难的不是写对那几行 CSS，而是想清楚：这个动效到底服务谁？鼠标用户要流畅，触屏用户要响应，旧浏览器用户至少得有静态 fallback。伪元素 + transform 是目前最轻量可靠的路径，但每一步都得扣住真实渲染链路来验证，而不是只看 CodePen 里跑通了没。
