伪元素必须显式声明content（如content: ""）才会渲染，否则不生成盒模型；默认display: inline不支持transform，需设display: block/inline-block；animation和transition必须写在伪元素选择器内，不可继承。
伪元素没 content 就根本不会渲染
浏览器对 ::before 和 ::after 的处理非常严格：如果 content 缺失、值为 none，或语法错误（比如 content: → 漏了引号），整个伪元素直接被跳过，不生成任何盒模型。没有盒，transform 再怎么写也无处作用。
必须显式声明 content，哪怕只是空字符串：content: ""；若依赖属性值，确保 HTML 中存在且非空，例如 content: attr(data-icon) 要求元素有 data-icon="arrow"。
- ❌
.btn::after { transform: scale(1.2); }—— 没content，啥都不渲染 - ✅
.btn::after { content: ""; display: block; transform: scale(1.2); }
伪元素默认是 inline，不支持 transform
::before/::after 默认是 display: inline，而 transform 要求元素具备布局盒（layout box）。纯 inline 元素（如 ）没有宽高和定位上下文，transform: translateX(20px) 可能执行了，但你完全看不到位移效果。
必须加 display: block、inline-block 或 flex 才能激活盒模型。若用 position: absolute，父容器还得设 position: relative，否则定位基准错乱。
- ⚠️ 即使写了
transform，没display也会“动了但看不见” - ?
display: inline-block是最轻量的通用解法，适合多数图标类伪元素
animation 必须写在伪元素选择器内部
CSS 动画属性不继承。把 animation 写在宿主元素上（如 .card { animation: spin 1s; }），对 ::before 完全无效。它必须明确落在伪元素规则里，且 @keyframes 名称要严格匹配（大小写、连字符、空格都不能错）。
多个动画可用逗号分隔，例如 animation: fadeIn 0.3s, rotate 2s infinite；若需保持终态，加 forwards，但更推荐在 @keyframes 中显式定义 100% 帧。
- ❌
.icon { animation: shake 0.5s; }→::after不动 - ✅
.icon::after { content: ""; display: block; animation: shake 0.5s; }
hover 下 transform 失效，其实是 transition 放错了位置
伪元素本身不能触发 :hover，但可以响应宿主的 :hover 状态。然而，transition 如果写在伪元素规则内（如 .box::after { transition: transform 0.3s; }），多数浏览器会忽略——它必须声明在宿主选择器中，并明确指向伪元素的可动画属性。
只对可动画属性使用 transition：transform、opacity、color 安全；display、content、height（当为 auto）不可过渡。另外，transition 必须写在初始状态（非 :hover 规则中），否则第一次变化无动画。
- ✅ 正确：
.box { transition: transform 0.3s; } .box:hover::after { transform: rotate(90deg); } - ❌ 错误：
.box::after { transition: transform 0.3s; } .box:hover::after { transform: rotate(90deg); }
实际调试时最容易漏掉的是 content 和 display 这两个前提——它们不像动画属性那样显眼，但缺一不可。DevTools 里看不到伪元素节点？先检查这两个；能看到节点但不动？再查 transform 是否被其他规则覆盖，或 @keyframes 名称是否拼错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
