CSS伪类:hover与CSS伪元素::before怎样打造悬停特效？

结论：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 这几个参数稍一错位，效果就偏移或卡顿——这些细节不跑一遍真机测试，光看预览很难发现。