伪元素默认不支持transition因其无DOM节点且不触发重绘；需用可动画属性（如transform、opacity）并由父元素状态驱动变化，同时确保初始值明确、定位正确。
伪元素默认不支持 transition 是为什么
因为 ::before 和 ::after 生成的内容属于“非渲染元素”——它们没有 DOM 节点，浏览器不会为它们单独创建渲染层，更不会监听其样式变化。所以直接给 ::before 写 transition: all 0.3s 是无效的。
必须用「可动画属性」+「触发重绘」才能生效
transition 只对可动画的 CSS 属性起作用，且需该属性在元素上真实存在并发生改变。伪元素要动起来，得满足两个条件：
- 目标属性本身可动画（如
opacity、transform、background-color、width/height（需有明确初始值）） - 该属性必须通过父元素的 class 切换、hover 等方式被“间接修改”——即：伪元素的样式由父元素状态驱动
常见错误是写 ::before { transition: left 0.3s; } 却没在 :hover::before 中设置 left 值，或初始值是 auto（不可动画）。
正确写法：用 transform + opacity 最稳妥
transform 和 opacity 是硬件加速属性，兼容性好、性能高，且无需定义宽高就能过渡。下面是一个按钮悬停时下划线从左滑入的效果：
立即学习“前端免费学习笔记（深入）”；
.btn {
position: relative;
display: inline-block;
}
.btn::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: #007bff;
transition: width 0.3s ease, transform 0.3s ease;
}
.btn:hover::after {
width: 100%;
transform: scaleX(1);
}
注意点：
- 必须设
content，否则伪元素不渲染 -
width初始值不能是auto，得是具体数值（如0） - 如果用
transform: translateX()，初始状态也要明确写transform: translateX(-100%)，不能依赖隐式值 - 多个 transition 属性建议合并写成
transition: width 0.3s, transform 0.3s，避免all引发意外动画
遇到 transition 不触发？先查这三件事
伪元素过渡失败，90% 出在这几个地方：
- 父元素没设
position: relative（导致::after的absolute定位错乱，动画起点/终点不可控） - 伪元素的初始状态和 hover 状态之间，至少有一个可动画属性发生了「有效变更」——比如
opacity: 0 → 1可以，但display: none → block不行（display不可动画） - 用了
transition-delay但没留意：延迟只在「触发时」生效，如果 hover 离开太快，可能根本看不到动画开始
复杂交互动画（比如多段路径、旋转+缩放）建议优先用 @keyframes + animation，transition 对伪元素的支持始终有限制，别硬扛。
