伪元素动画必须用 transform 而非 left/top，因其默认静态定位导致 left/top 无效；需设 content、display，transition 写全，:hover 作用于宿主元素，注意兼容性与性能优化。
伪元素
动画必须用 transform 而不是 left/top
直接给
或
设置
、
动画，hover 时几乎看不到变化——因为伪元素默认是静态定位，且未显式设置
时，
不生效。真正可靠的方式是用
配合
。
实操建议：
伪元素必须声明
（哪怕为空）才能渲染
旋转动画要加
或
，否则
可能不触发重绘
过渡属性写全：用
，别只写
（性能差，且可能意外触发动画）
:hover 作用在父元素上才能联动伪元素
伪元素没有自己的事件，
和
无法直接绑定
。必须把
写在它的宿主元素（比如
、
、
）上，再通过选择器指向伪元素。
常见错误现象：
立即学习
“
前端免费学习笔记（深入）
”；
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
—— 语法非法，浏览器直接忽略
—— 正确写法，hover 状态下修改伪元素样式
如果宿主元素没设
，而伪元素用了
定位，容易跑偏，建议统一加
旋转动画卡顿？检查 will-change 和硬件加速
小图标旋转（尤其 SVG 或字体图标）在低端设备或旧版 Chrome 上可能出现掉帧。根本原因是浏览器没启用 GPU 加速。
解决方法：
给伪元素加
（仅 hover 前一帧触发，比一直开着更稳妥）
或者强制硬件加速：
，但注意
在部分 Safari 版本中会引发文字模糊，慎用
避免在伪元素里用
或渐变背景做旋转动画，这些会显著增加绘制开销
兼容性要点：IE11 及以下不支持伪元素 transition
IE11 能识别
和
，但不支持对伪元素的
。也就是说，
在 IE11 中会“跳变”，没有过渡效果。
若需兼容：
放弃 IE 支持，现代项目可直接忽略
改用 JS 监听
/
，动态切换 class 实现降级动画（但伪元素 class 切换本身在 IE11 也不稳定）
更稳妥的做法：把图标换成真实
元素，用 JS 或 CSS 类控制其
，兼容性和可控性都更好
实际最简可用示例：
伪元素动画的边界很清晰：它依赖宿主状态、受限于浏览器对伪元素样式的更新策略，一旦涉及复杂路径或叠加效果，不如用真实 DOM 元素可控。
::before::afterlefttoppositionleft/toptransform: rotate()transitioncontent: ""display: inline-blockblocktransformtransition: transform 0.3s easetransition: all::before::after:hover:hoverabuttonspana::before:hover { ... }a:hover::before { ... }position: relativeabsoluteposition: relativewill-change: transformtransform: rotate(0deg) translateZ(0)translateZ(0)box-shadow::before:hovertransitiona:hover::before { transform: rotate(90deg); }mouseentermouseleavetransformbutton {
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);
}