能，但有限制：::before和::after可用animation或transition控制，前提是声明content且使用可动画属性（如opacity、transform）；content是前提，必须显式设置；动画中不能改变content值。
伪元素能直接参与 CSS 动画吗？
能，但有限制：::before 和 ::after 可以用 animation 或 transition 控制，前提是它们有可动画的属性（比如 opacity、transform、background-color），且已声明 content（哪怕只是 content: ""）。
常见错误是写了 animation: spin 1s infinite 却没动——八成是漏了 content，或者父元素没设 position: relative（导致伪元素定位失效，视觉上“不见了”）。
-
content是伪元素存在的前提，必须显式设置（""、" "、"•"都行，但不能省略） - 伪元素默认是 inline 级别，若要用
transform或top/left，得加display: block或inline-block - 动画中改
content值不会触发过渡或关键帧变化（CSS 不支持content动画）
用 ::before 实现加载 spinner，不加 DOM 节点
典型场景：按钮点击后显示 loading 状态，又不想多写一个 <span class="loading"></span>。靠伪元素就能撑起整个旋转圆环。
核心思路是让伪元素承载 border-radius + border + transform 动画，父元素控制尺寸和相对定位。
立即学习“前端免费学习笔记（深入）”；
- 父元素需设
position: relative，否则absolute定位的伪元素会脱离上下文 - 伪元素用
border: 2px solid transparent+border-top-color拉出单色弧线，再配border-radius: 50%形成圆环 - 动画只驱动
transform: rotate(360deg)，别用animation: spin 1s linear infinite同时改多个属性，容易在 Safari 上卡顿
button.loading::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 12px;
height: 12px;
border: 2px solid transparent;
border-top-color: #007bff;
border-radius: 50%;
margin: -6px 0 0 -6px;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
伪元素做遮罩层，避免 z-index 层叠混乱
当需要全屏遮罩+中间弹窗时，很多人习惯加一层 <div class="overlay"></div>，结果和 Modal 的 z-index 反复打架。用 ::before 挂在 Modal 根节点上更干净。
关键是伪元素继承父元素的 stacking context，只要父元素 z-index 设得合理，遮罩和内容天然同层，不用额外调 z-index。
- 伪元素必须设
position: fixed（全屏）或absolute（局部），不能依赖 static 流式布局 - 如果父元素没设
position，fixed伪元素会相对于 viewport 定位，可能偏移预期位置 - 遮罩背景推荐用
background-color: rgba(0,0,0,0.5)，别用半透图片——伪元素不支持background-image渐变动画
伪元素动画的性能和兼容性底线
伪元素动画在现代浏览器里基本稳，但两个地方必须手动兜底：
- IE11 不支持
@keyframes作用于伪元素（会静默忽略），如需兼容，得降级为 JS 控制类名切换 - Android 4.4 WebView 对
transform+will-change组合敏感，伪元素加will-change: transform可能引发闪烁，建议只在真正卡顿时加 - 伪元素无法绑定事件，所以“点击遮罩关闭弹窗”这种逻辑，仍得靠父元素监听，别试图给
::before加click
最常被忽略的一点：伪元素的动画状态不会被 JavaScript 读取（getComputedStyle(el, "::before") 在多数浏览器返回空对象），调试时别指望用 JS 查它的 transform 值。
