伪元素通过父元素状态驱动可实现流畅动画，关键在于利用transform和opacity属性配合transition，并设置position脱离文档流以避免布局抖动，从而提升性能。
伪元素本身不能直接触发过渡动画，因为它们不是独立的 DOM 元素，无法像普通元素那样响应状态变化。但通过巧妙结合 ::before 或 ::after 与父元素的 :hover 等状态，再配合 transition，可以实现流畅、高性能的动画效果。关键在于控制伪元素的可动画属性（如 opacity、transform、left 等），并合理设置过渡参数。
利用 transform 和 opacity 实现流畅动画
在伪元素上使用 transform 和 opacity 能避免重排重绘，仅触发合成层变化，性能更优。这些属性由浏览器 GPU 加速处理，适合做平滑过渡。
示例：悬停时从侧边滑出装饰条
::before {
content: "";
display: block;
width: 100%;
height: 4px;
background: #007acc;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
}
&:hover::before {
transform: scaleX(1);
}
控制 transition 触发时机和层级
将 transition 定义在默认状态上，而非 hover 状态，确保进出动画都平滑。同时注意伪元素的 visibility 与 opacity 配合使用，避免视觉突兀。
技巧：延迟隐藏以完成动画收尾- hover 时显示伪元素并开始动画
- 离开时通过 opacity 淡出，配合 transition-delay 控制隐藏时机
::after {
content: "New";
opacity: 0;
visibility: hidden;
transition: opacity 0.2s, visibility 0.2s;
}
&:hover::after {
opacity: 1;
visibility: visible;
}
避免布局抖动，使用 position 定位
伪元素若影响文档流（如 display: block 且无定位），可能导致页面重排。推荐使用 position: absolute 将其脱离文档流，减少对布局的影响。
立即学习“前端免费学习笔记（深入）”；
建议：- 为父元素设置 position: relative
- 伪元素使用 position: absolute 定位
- 提前设置宽高或 transform 占位，避免尺寸变化引发抖动
基本上就这些。核心是把伪元素当作“视觉装饰层”，通过父级状态驱动其 transform 或透明度变化，搭配合理的 transition 参数，就能做出轻量又丝滑的动画，还不增加 HTML 结构负担。不复杂但容易忽略细节。
