归纳而言，要让 CSS 悬停动画顺利生效，必须同时满足三个关键条件：:hover 伪类必须定义在宿主元素上，::before 伪元素需要设置 content 属性与定位方式，再配合 transition 过渡才能产生动画效果；缺少任意一环，动画都将无法运行。由于伪元素并非真实 DOM 节点，无法直接绑定 :hover 事件，a::before:hover 写法虽然语法正确，但语义上无效，浏览器会直接忽略；而 a:hover::before 通过宿主元素的状态变化触发伪元素样式变更，才是唯一可靠的实现方式。
核心要点：:hover 必须定义在宿主元素上，::before 必须设置 content 与定位属性，两者配合 transition 才能实现动画；缺少任何一环，悬停效果都将失效。
为什么 a:hover::before 写法有效，而 a::before:hover 却毫无反应？
很多开发者会疑惑：为什么 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，悬停时切换为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 等参数稍有偏差，效果就会出现偏移或卡顿——这些细节若不经过真机测试，仅靠预览很难发现。
