按钮悬停时用::before实现渐变遮罩或图标滑入动画，需设position:relative和content:""，推荐linear-gradient高光、transform位移及will-change优化性能，注意z-index层级、pointer-events和硬件加速。
按钮悬停时用 ::before 做渐变遮罩动画
直接用 ::before 叠加一层半透明背景，配合 transition 实现平滑覆盖效果，比改 background-color 更可控、更易叠加纹理或图标。
- 必须给按钮设
position: relative，否则::before会脱离文档流乱飘 -
::before默认不显示，得显式设content: ""（哪怕空字符串也不能省） - 推荐用
background: linear-gradient(45deg, rgba(255,255,255,0.2), transparent)模拟高光扫过感，比纯色更自然 - 动画触发写在按钮上：
transition: all 0.3s ease，但只对::before的opacity或transform做过渡，避免重绘开销
用 ::before 插入图标并做位移动画
想让按钮悬停时图标从左滑入？别在 HTML 里塞 <i></i>，用 ::before 生成 + transform: translateX() 更轻量。
- 图标用
font-family: "icon-font"或 Unicode 字符（如\2192→），避免额外 DOM 节点 -
::before初始设transform: translateX(-10px)和opacity: 0，悬停时还原 - 务必加
pointer-events: none到::before，否则图标区域会拦截鼠标事件，导致悬停失效 - 若用 SVG 内联编码，得转成
data:image/svg+xml;base64,...塞进background-image，::before不支持直接嵌 SVG 标签
::before 动画卡顿或闪动的常见原因
不是 CSS 写错了，大概率是渲染层没触发硬件加速或层级冲突。
- 加
will-change: transform到按钮本身（不是::before），提前告诉浏览器要动 - 避免同时过渡
width/height—— 这会触发 Layout，卡顿明显；优先用transform和opacity - 如果按钮父容器有
overflow: hidden，检查::before是否被裁切：加z-index: 1并确保父容器z-index不为 auto - 旧版 Safari 对
::before的transition支持弱，测试时用-webkit-transform补全
多个伪元素动画叠加时的层级控制
一个按钮同时用 ::before 做遮罩、::after 做边框动画？顺序和堆叠上下文得手动管。
-
::before默认在元素内容底层，::after在顶层 —— 但若都设了z-index，就得按数值排：负值压底，正值往上堆 - 不要依赖默认层叠顺序，显式写
z-index: -1（遮罩）和z-index: 2（图标），避免意外覆盖 - 如果动画涉及缩放（
scale()），记得加transform-origin: center统一基准点，否则不同伪元素缩放中心不一致，看起来歪斜
::before 的尺寸、定位偏移、过渡属性组合稍有偏差，动画就会断掉或错位——尤其在移动端视口缩放后，px 偏移可能失准，建议优先用 em 或 %。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
