结论：hover 必须写在宿主元素上，::before 必须设 content 和定位，两者配合 transition 才能动；漏掉任何一环，动画就失效。因为伪元素不是真实 dom 节点，不支持直接绑定 :hover，a::before:hover 语法虽合法但语义无效，浏览器直接忽略；而 a:hover::before 通过宿主状态触发样式变更，是唯一可靠路径。
直接说结论：hover 必须写在宿主元素上，::before 必须设 content 和定位，两者配合 transition 才能动；漏掉任何一环，动画就失效。
为什么 a:hover::before 写法才有效，而 a::before:hover 会静音？
::before 和 ::after 是伪元素，不是真实 DOM 节点，不支持绑定事件或伪类。浏览器会直接忽略 a::before:hover 这种写法——它语法合法但语义无效，调试时看不到任何变化。
-
a:hover::before是正确路径：鼠标悬停触发 a 的状态，再通过选择器影响其伪元素 - 宿主元素（如
button、a、span）必须设position: relative，否则::before的position: absolute会相对于 body 定位，飘走 - 伪元素默认不渲染，
content: ""是硬性要求——哪怕空字符串也不能省，否则后续所有样式（包括transform、opacity）都无效
::before 动画该用 transform 还是 left/top？
优先用 transform。伪元素默认 position: static，直接设 left: 10px 在多数浏览器里根本不会触发位移动画；而 transform: translateX(10px) 不依赖定位上下文，兼容性好、性能高。
- 滑入图标：初始
transform: translateX(-10px) opacity: 0，hover 时改为transform: translateX(0) opacity: 1 - 缩放效果：用
transform: scale(0)→scale(1)，记得加transform-origin: center统一缩放中心 - 避免同时过渡
width和height：这会触发 Layout，卡顿明显；改用transform+opacity组合更稳
悬停遮罩、流光边框、提示框，为什么都要加 z-index？
伪元素默认层叠顺序不可靠：::before 在内容底层，::after 在顶层，但一旦设了 position: absolute，它们就脱离文档流，容易被父容器的 overflow: hidden 裁切，或被其他元素盖住。
- 遮罩类效果（如渐变高光）建议设
z-index: -1，确保压在文字下方 - 图标或提示框类需
z-index: 2或更高，避免被按钮背景色吞掉 - 父容器若设了
overflow: hidden，必须确认伪元素尺寸和inset值是否越界；圆角容器要同步伪元素的border-radius，否则流光在拐角断开
真正难的不是写出第一版动画，而是当多个伪元素叠加、父容器有复杂层级或圆角时，z-index、transform-origin、will-change 这几个参数稍一错位，效果就偏移或卡顿——这些细节不跑一遍真机测试，光看预览很难发现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
