伪元素加载动画不转的主因是未设content、display或定位不当；正确写法需content:""、display:block/inline-block、position:absolute配合transform居中旋转。
伪元素加载动画为什么转不起来
常见现象是写了 ::before 或 ::after，加了 animation，但图形完全不动——大概率是没给伪元素设 content，或者忘了设尺寸/显示方式。
-
content必须显式声明（哪怕只是content: ""），否则伪元素不渲染，动画自然无效 - 伪元素默认是
display: inline，不支持宽高、border-radius等；得加display: block或inline-block - 如果父容器没设
position: relative，又想用absolute定位伪元素，容易飘出可视区，看起来像“消失”了
旋转圆圈最简可行写法（CSS only）
不用 JS、不依赖第三方库，一个带旋转的圆圈加载器，核心就三步：占位、绘形、动起来。
button {
position: relative;
}
button::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 16px;
height: 16px;
border: 2px solid #ccc;
border-top-color: #007bff;
border-radius: 50%;
transform: translate(-50%, -50%);
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: translate(-50%, -50%) rotate(360deg); }
}
注意：transform 里必须同时保留 translate 和 rotate，只写 rotate 会绕左上角转，不是绕中心。
before 和 after 同时用时的坑
想做一个双色旋转环（比如 loading 的“双圆弧”效果），常会想到一个用 ::before，一个用 ::after。但实际容易卡在两处：
立即学习“前端免费学习笔记（深入）”；
- 两个伪元素默认层叠顺序是
::after在::before上面，如果没调z-index，后画的可能盖住前画的，导致视觉错乱 - 若父元素没设
position，absolute定位的伪元素会相对于最近有定位的祖先定位——而不是你想象的按钮本身，结果动画跑偏 - 别在伪元素里用
background-image模拟旋转，它不随transform旋转；要旋转图案，得用border+clip-path或 SVG 内联
移动端旋转动画卡顿或掉帧
尤其 iOS Safari 下，纯 transform + opacity 通常流畅，但一旦涉及 border 绘图 + rotate，容易触发重排或软件渲染。
- 优先用
transform: rotate()而非animation: spin配合角度数值变化，前者更易被 GPU 加速 - 避免在伪元素里设
box-shadow或渐变边框，这些在低端机上开销大 - 真要保兼容又求性能，不如直接用内联
<svg></svg>+stroke-dasharray动画，比 CSS 伪元素更可控
伪元素做加载动画的边界很清晰：轻量、静态图形、不需要精确 timing 控制时够用；一旦要响应状态、暂停/重置、或适配深色模式变量，就得切到 JS 或 SVG 方案——这点很容易被忽略，直到 QA 提出“点击按钮后动画停不住”。
