伪元素不继承transform等变换属性，仅继承最终渲染值；其动画、3D效果及定位均需显式声明，无法依赖父级带动。
伪元素不继承 transform，只继承最终渲染值
伪元素（::before 和 ::after）根本不会继承 transform 这类属性——它不是“继承失败”，而是规范上就不支持。浏览器只把父元素变换后的**视觉结果**（比如位置、缩放后的像素布局）作为伪元素的初始渲染上下文，但不会把 transform: rotate(45deg) 这个声明本身传下去。
这意味着：即使父元素加了 transform: scale(1.2)，伪元素自身若没写 transform，它就完全按未缩放的坐标系绘制；你也不能指望它“跟着父级一起旋转”。
- 查
getComputedStyle(el, '::before').transform会返回none，哪怕父级转得飞起 - 想让伪元素也旋转？必须显式写：
.box::before { transform: rotate(45deg); } - 父元素用
transform: translateZ(0)创建合成层，伪元素照样不受影响——它只是被“画”在那个层里，不参与变换计算
transform-style: preserve-3d 对伪元素无效
transform-style 只作用于**真实子元素**，对伪元素无意义。伪元素没有 DOM 节点，不构成“子元素层级关系”，所以无论父容器设 transform-style: flat 还是 preserve-3d，伪元素都始终处于扁平化状态，无法获得独立的 3D 坐标系。
常见误判场景：给一个带 perspective 和 transform-style: preserve-3d 的容器写 ::after，期望它悬浮在 3D 空间里——实际它只会被拍平到容器的 XY 平面，z 轴位移（如 translateZ(20px)）可能被忽略或渲染异常。
立即学习“前端免费学习笔记（深入）”；
- 验证方法：在 DevTools 的 3D 视图面板中，
::before/::after不会单独成层，也不显示深度信息 - 替代方案：用真实子元素（比如
<span class="deco"></span>）代替伪元素，再配transform-style: preserve-3d
伪元素动画依赖自身 transform，不能靠父级带动
父元素做 transform 动画时，伪元素看起来“动了”，其实只是被父级的视觉变换裹挟着重绘——它自身没有任何过渡或动画逻辑。一旦你想控制伪元素的独立运动（比如悬停时自己旋转+缩放），就必须把它和父元素的动画解耦。
- 错误写法：
.card { animation: spin 2s infinite; } .card::after { content: ""; }→ 伪元素只随父级旋转，无法叠加自己的动画 - 正确写法：
.card::after { content: ""; animation: spin 2s infinite, pulse 1s ease-in-out; }→ 所有动画必须直接写在伪元素选择器内 - 多个动画叠加时，注意 timing function 和 fill-mode 冲突，比如一个
forwards一个backwards容易导致终态错乱
为什么 transform + position: fixed 在伪元素里更危险
伪元素默认是 inline，且没有自己的包含块（containing block）概念。一旦你在伪元素上同时写 position: fixed 和 transform，行为极不可控：某些浏览器会忽略 fixed（因伪元素无 viewport 上下文），另一些则强行创建局部定位上下文，导致偏移基准错乱。
更隐蔽的问题是：父元素若有 transform，它已创建新包含块，此时伪元素的 fixed 实际退化为 relative —— 但你根本没法在 DevTools 里看到这个“退化”，因为伪元素节点不显示在 Elements 面板中。
- 绝对不要写：
.nav::before { position: fixed; top: 0; transform: translateY(-50%); } - 真需要固定定位的装饰元素？用真实 DOM 节点 +
createPortal或Teleport挂到body下 - 若坚持用伪元素，只用
transform配合position: absolute，并确保父容器有position: relative
transform、animation、content 全部显式落在伪元素选择器里，别省那几行代码。 
