能，但有限制：::before和::after可用animation或transition控制，前提是声明content且使用可动画属性（如opacity、transform）；content是前提，必须显式设置；动画中不能改变content值。
伪元素
能直接参与 CSS 动画吗？
能，但有限制：
和
可以用
或
控制，前提是它们有可动画的属性（比如
、
、
），且已声明
（哪怕只是
）。
常见错误是写了
却没动——八成是漏了
，或者父元素没设
（导致伪元素定位失效，视觉上“不见了”）。
是伪元素存在的前提，必须显式设置（
、
、
都行，但不能省略）
伪元素默认是 inline 级别，若要用
或
，得加
或
动画中改
值不会触发过渡或关键帧变化（CSS 不支持
动画）
用
实现加载 spinner，不加 DOM 节点
典型场景：按钮点击后显示 loading 状态，又不想多写一个
。靠伪元素就能撑起整个旋转圆环。
核心思路是让伪元素承载 border-radius + border + transform 动画，父元素控制尺寸和相对定位。
立即学习
“
前端免费学习笔记（深入）
”；
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
父元素需设
，否则
定位的伪元素会脱离上下文
伪元素用
+
拉出单色弧线，再配
形成圆环
动画只驱动
，别用
同时改多个属性，容易在 Safari 上卡顿
伪元素做遮罩层，避免 z-index 层叠混乱
当需要全屏遮罩+中间弹窗时，很多人习惯加一层
，结果和 Modal 的
反复打架。用
挂在 Modal 根节点上更干净。
关键是伪元素继承父元素的 stacking context，只要父元素
设得合理，遮罩和内容天然同层，不用额外调
。
伪元素必须设
（全屏）或
（局部），不能依赖 static 流式布局
如果父元素没设
，
伪元素会相对于 viewport 定位，可能偏移预期位置
遮罩背景推荐用
，别用半透图片——伪元素不支持
渐变动画
伪元素动画的性能和兼容性底线
伪元素动画在现代浏览器里基本稳，但两个地方必须手动兜底：
IE11 不支持
作用于伪元素（会静默忽略），如需兼容，得降级为 JS 控制类名切换
Android 4.4 WebView 对
+
组合敏感，伪元素加
可能引发闪烁，建议只在真正卡顿时加
伪元素无法绑定事件，所以“点击遮罩关闭弹窗”这种逻辑，仍得靠父元素监听，别试图给
加
最常被忽略的一点：伪元素的动画状态不会被 JavaScript 读取（
在多数浏览器返回空对象），调试时别指望用 JS 查它的
值。
::before::afteranimationtransitionopacitytransformbackground-colorcontentcontent: ""animation: spin 1s infinitecontentposition: relativecontent""" ""•"transformtop/leftdisplay: blockinline-blockcontentcontent::beforeposition: relativeabsoluteborder: 2px solid transparentborder-top-colorborder-radius: 50%transform: rotate(360deg)animation: spin 1s linear infinitebutton.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::beforez-indexz-indexposition: fixedabsolutepositionfixedbackground-color: rgba(0,0,0,0.5)background-image@keyframestransformwill-changewill-change: transform::beforeclickgetComputedStyle(el, "::before")transform