如何通过CSS伪元素before和after实现加载动画中的旋转图形效果？

本文共计807个文字，预计阅读时间需要4分钟。

常见现象是写了 `before` 或 `after`，加了 `animation`，但图形完全不动——大概率是没有给伪元素设 `content`，或者忘了设尺寸/显示方式。

• content 必须显式声明（哪怕只是 content: ""），否则伪元素不渲染，动画自然无效
• 伪元素默认是 display: inline，不支持宽高、border-radius 等；得加 display: block 或 inline-block
• 如果父容器没设 position: relative，又想用 absolute 定位伪元素，容易飘出可视区，看起来像“消失”了

旋转圆圈最简可行写法（CSS only）

不用 JS、不依赖第三方库，一个带旋转的圆圈加载器，核心就三步：占位、绘形、动起来。