伪元素动画必须用 transform 而非 left/top，因其默认静态定位导致 left/top 无效；需设 content、display，transition 写全，:hover 作用于宿主元素，注意兼容性与性能优化。
伪元素动画必须用 transform 而不是 left/top
直接给 ::before 或 ::after 设置 left、top 动画，hover 时几乎看不到变化——因为伪元素默认是静态定位，且未显式设置 position 时，left/top 不生效。真正可靠的方式是用 transform: rotate() 配合 transition。
实操建议：
- 伪元素必须声明
content: ""（哪怕为空）才能渲染 - 旋转动画要加
display: inline-block或block，否则transform可能不触发重绘 - 过渡属性写全：用
transition: transform 0.3s ease，别只写transition: all（性能差，且可能意外触发动画）
:hover 作用在父元素上才能联动伪元素
伪元素没有自己的事件，::before 和 ::after 无法直接绑定 :hover。必须把 :hover 写在它的宿主元素（比如 a、button、span）上，再通过选择器指向伪元素。
常见错误现象：
-
a::before:hover { ... }—— 语法非法，浏览器直接忽略 -
a:hover::before { ... }—— 正确写法，hover 状态下修改伪元素样式 - 如果宿主元素没设
position: relative，而伪元素用了absolute定位，容易跑偏，建议统一加position: relative
旋转动画卡顿？检查 will-change 和硬件加速
小图标旋转（尤其 SVG 或字体图标）在低端设备或旧版 Chrome 上可能出现掉帧。根本原因是浏览器没启用 GPU 加速。
解决方法：
- 给伪元素加
will-change: transform（仅 hover 前一帧触发，比一直开着更稳妥） - 或者强制硬件加速：
transform: rotate(0deg) translateZ(0)，但注意translateZ(0)在部分 Safari 版本中会引发文字模糊，慎用 - 避免在伪元素里用
box-shadow或渐变背景做旋转动画，这些会显著增加绘制开销
兼容性要点：IE11 及以下不支持伪元素 transition
IE11 能识别 ::before 和 :hover，但不支持对伪元素的 transition。也就是说，a:hover::before { transform: rotate(90deg); } 在 IE11 中会“跳变”，没有过渡效果。
若需兼容：
- 放弃 IE 支持，现代项目可直接忽略
- 改用 JS 监听
mouseenter/mouseleave，动态切换 class 实现降级动画（但伪元素 class 切换本身在 IE11 也不稳定） - 更稳妥的做法：把图标换成真实
元素，用 JS 或 CSS 类控制其transform，兼容性和可控性都更好
实际最简可用示例：
button {
position: relative;
}
button::after {
content: "→";
display: inline-block;
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
button:hover::after {
transform: rotate(90deg);
}
伪元素动画的边界很清晰：它依赖宿主状态、受限于浏览器对伪元素样式的更新策略，一旦涉及复杂路径或叠加效果，不如用真实 DOM 元素可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
