伪元素必须声明content且设为块级才能动画：content缺失或为none则不渲染；默认inline不支持transform，需display:block等；animation不继承，须直接写在伪元素选择器内。
伪元素没 content 就根本不会渲染
浏览器对 ::before 和 ::after 的处理很“实在”：如果 content 缺失、值为 none，或语法错误（比如漏了引号），整个伪元素直接被跳过，不生成任何盒模型。没有盒，自然没有动画载体。
常见错误现象：写了一堆 transform 和 @keyframes，但页面完全没反应，开发者工具里也看不到该伪元素节点。
- 必须显式声明
content: ""（空字符串即可）或具体文本/符号，如content: "→" - 若内容来自 attr()，确保对应 HTML 属性存在且非空，例如
content: attr(data-label)要求元素有data-label="tip" - 不要用
content: none试图“隐藏”，它等价于删除伪元素
伪元素默认是 inline，不支持 transform 等动画属性
::before/::after 默认是 display: inline，而 transform、宽高、定位偏移等动画依赖块级盒模型。没盒模型，transform: translateX(10px) 可能执行了，但你根本看不见位移效果。
- 加
display: block、inline-block或flex是硬性前提 - 若用
position: absolute，父容器记得设position: relative，否则定位基准错乱 - 避免只靠
width/height驱动动画——若初始值是auto，浏览器无法插值，改用transform或明确初值
animation 不继承，必须写在伪元素选择器内部
很多人把 animation 写在宿主元素上，指望它“传下去”，但 CSS 动画属性不参与继承。伪元素不会自动获得父级的 animation 声明，哪怕选择器看起来嵌套。
- ❌ 错误：
.card { animation: fade 1s; }→::before完全不动 - ✅ 正确：
.card::before { content: ""; animation: fade 1s; } -
@keyframes可全局定义，但调用必须落在::before或::after的样式块内 - 多个动画用逗号分隔，如
animation: slideIn 0.4s, pulse 2s infinite;
hover 下动画失效，其实是 transition 写错了位置
伪元素本身不能触发 :hover，但可以响应宿主的 :hover 状态。然而，transition 属性如果写在伪元素规则里，多数浏览器会忽略——它必须声明在宿主选择器中，并明确指向伪元素的可动画属性。
- ✅ 正确：
.btn::after { content: ""; opacity: 0; } .btn:hover::after { opacity: 1; } .btn { transition: opacity 0.3s; } - ❌ 错误：
.btn::after { transition: opacity 0.3s; }（无效） - 优先用
transform和opacity，避免left/top触发重排，也别碰display或content——它们不可过渡
最容易被忽略的点是：伪元素的 z-index 在无堆叠上下文的父容器里形同虚设；哪怕写了 z-index: -1，也可能被背景层盖住。真要调试，先临时加 border: 1px solid red 和 background，确认它确实存在、可见、没被裁剪。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
