::after比::before更适合做Spinner动画，因其默认渲染在内容之后、层级更可控，无需额外z-index；宿主需设position: relative且非inline；用border+transparent模拟旋转环形，border-radius仅辅助收圆。
为什么::after比::before更适合做Spinner动画
因为::after默认渲染在元素内容之后，叠加层级更可控；多数情况下无需额外设置z-index或position冲突。如果用::before，容易被后续内容遮盖，尤其在按钮、图标等紧凑容器中。
必须给宿主元素设position: relative，否则::after的absolute定位会相对于最近的定位祖先，结果飘到页面任意位置。
- 宿主元素不能是
display: inline（如span），否则width/height不生效 → 改用inline-block或flex - 动画需用
border+transparent模拟环形，不能依赖background渐变（兼容性差且不易旋转均匀） - 避免在
body或html上直接挂::after，会导致全页重绘卡顿
border + transparent画圆的底层逻辑
CSS圆不是靠border-radius: 50%——那是“画框”，真正旋转起来像Spinner的是用border三边透明、一边有色，再配合animation: rotate。
关键点：宽高为0，只靠border撑出形状。例如border: 4px solid #007bff画实心圆，但Spinner要空心，所以写成：border: 4px solid transparent，再单独指定某一边颜色。
立即学习“前端免费学习笔记（深入）”；
-
border-top-color: #007bff→ 顺时针转就是顶部色块扫圈 -
border-right-color: #007bff→ 转起来像“打点”效果，适合小尺寸 - 边框宽度建议≤6px，太大旋转时边缘锯齿明显（尤其Safari）
最简可用的Spinner代码片段
以下代码可直接复制进项目，支持所有现代浏览器（Chrome 49+、Firefox 43+、Safari 12.1+）：
.spinner {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
}
.spinner::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid transparent;
border-top-color: #007bff;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
注意：border-radius: 50%在这里只是辅助收圆角，真正转动的是整个伪元素；若去掉它，在低分辨率屏上可能看到轻微多边形感。
- 想改速？调
animation: spin 0.8s就行，别碰@keyframes百分比 - 想换色？只改
border-top-color，别动border其他部分 - IE11不支持
transform: rotate在伪元素上 → 必须加-ms-transform前缀（已过时，仅存档用）
常见动不了的三个真实原因
不是代码写错，而是环境或认知盲区：
-
content: ""漏写了 → 伪元素根本不会渲染，::after静默失效 - 宿主元素
overflow: hidden裁掉了旋转区域 → 检查父容器是否截断了absolute定位内容 - 用了
will-change: transform但没配transform: translateZ(0)→ 某些安卓WebView下动画卡顿甚至停摆
复杂点在于：同一个::after Spinner在按钮里能转，在表格单元格里不动——大概率是table-cell的vertical-align和position交互异常，这时宁可套一层div也不硬调。
