伪元素 ::before 动画失效的根本原因是 content 缺失、display 未设置或初始值未定义；必须显式声明 content、设置 display（如 inline-block）、在伪元素规则内定义 animation/transition，并确保属性可动画。
伪元素 ::before 无法应用某些 CSS 动画属性，根本原因不是“不支持”，而是它默认不具备可动画的渲染基础——没 content 就不渲染，没 display 就不占空间，没初始值就无法插值。
content 缺失导致整个伪元素被跳过
浏览器对 ::before 的处理是：如果 content 未声明、值为 none，或为空白字符串但未显式写出（如只写 ::before 不带 content），该伪元素根本不会进入渲染树。此时无论你写多少 animation、transform 或 transition，都毫无作用。
- ✅ 正确写法：
::before { content: ""; }或::before { content: "→"; } - ❌ 错误写法：
::before { }（无 content）、::before { content: none; }、::before { content: " "; }（部分浏览器忽略单空格） - 调试技巧：在 DevTools 中检查 computed 样式，确认
content的最终计算值不是none
display 类型限制 transform 和尺寸动画
::before 默认是 display: inline，而 transform、width、height、top/left 等属性在 inline 元素上无效或行为异常。这不是动画“失效”，而是属性压根没生效。
- 必须显式设置
display才能启用盒模型：block、inline-block、flex或grid - 例如：
transform: rotate(45deg)在display: inline下静默失败；加了display: inline-block后立即生效 - 若用
position: absolute定位，记得父元素设position: relative，否则偏移基准不可控
transition 和 animation 必须写在伪元素规则内
animation 和 transition 都不继承。你在父选择器（如 .box）上写 animation: spin 1s，.box::before 不会自动获得这个动画。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
.box::before { content: ""; animation: slideIn 0.5s; } - ❌ 错误：
.box { animation: slideIn 0.5s; }→ 伪元素不动 - 同样，
transition必须提前定义初始态：.box::before { opacity: 0; transition: opacity 0.3s; }，再在:hover中改opacity: 1 - 属性名大小写、连字符必须完全一致，比如
background-color不能写成backgroundcolor
不可动画的属性被误用
不是所有 CSS 属性都能参与过渡或动画。伪元素和普通元素一样，受限于浏览器的可动画属性列表。
- ✅ 支持动画的常见属性：
opacity、transform、color、background-color、top/left（需配合position） - ❌ 不支持动画的属性：
display、content、z-index（数值本身可变，但切换层叠上下文不触发过渡）、height/width从auto变化时 - 特别注意：
visibility本身不可动画，但常和opacity配合使用实现“渐隐”效果；单独对visibility加transition无效
真正卡住人的地方，往往不是语法写错，而是 content 漏了、display 没调、初始值没设——这三个点反复检查一遍，90% 的“动画不生效”问题就定位到了。
