伪元素动画需显式声明transition属性，如width或transform，并配合content、position等确保渲染；用transform:scalex()替代width可避免重排，提升性能；定位错位时应检查父容器布局及伪元素inset/vertical-align设置。
transition 无法直接监听伪元素的宽度变化
CSS 的 transition 不会响应伪元素（如 ::before、::after）自身尺寸的“隐式变化”——比如通过 width 或 transform 改变其渲染尺寸时，若该变化由父元素状态（如 :hover）触发但未在伪元素上显式声明可过渡属性，动画就会失效或跳变。
常见错误现象：::after 边框从 0 → 100% 宽度时“啪”一下弹出来，没有渐变；控制台无报错，但动画没生效。
- 必须在伪元素上显式写
transition: width 0.3s ease（或其他目标属性），不能只在父元素上写 - 初始状态需用
content: ""+display: block等确保伪元素真实存在并可渲染尺寸 - 避免用
max-width模拟长度变化——它不可过渡，浏览器不支持 - 若用
transform: scaleX(0)→scaleX(1)，需配transform-origin: left保证从左向右展开
用 ::after + width + transition 实现动态边框
这是最直观、兼容性好（Chrome 4+、Firefox 4+、Safari 5.1+）、语义清晰的做法。核心是把边框“画”成一个绝对定位的伪元素条，再控制它的宽度。
使用场景：按钮底部/顶部单边动态伸缩线、悬停时左右延伸的下划线、加载中进度式边框。
button {
position: relative;
overflow: hidden;
}
button::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: #007bff;
transition: width 0.3s ease;
}
button:hover::after {
width: 100%;
}
-
position: relative是必须的，否则absolute伪元素会相对于 body 定位 - 不要给伪元素设
display: none初始态——它会导致transition失效；用width: 0更安全 - 若按钮有圆角（
border-radius），伪元素也要同步加，否则边缘露白 - 移动端需注意
hover在触摸设备上不触发，建议同时加:focus和:active
用 transform 替代 width 避免重排（性能更稳）
直接改 width 会触发 layout（重排），尤其在复杂布局中可能卡顿；而 transform: scaleX() 只走合成层，GPU 加速，更顺滑。
参数差异：scaleX(0) 是完全压缩，scaleX(1) 是原始宽度；需配合 transform-origin: left 才能从左向右展开。
button::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: #007bff;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
}
button:hover::after {
transform: scaleX(1);
}
- 必须设
width: 100%初始值，否则scaleX(0)会缩成一个点，看不见起点 -
transform-origin不写默认是中心，会导致边框从中向两边展开，不符合“动态延伸”预期 - Safari 旧版本对
transform+transition组合偶有渲染毛刺，可加will-change: transform微调（但别滥用）
伪元素边框在 flex/grid 容器中错位怎么办
当按钮放在 display: flex 或 grid 容器里，且父容器设置了 align-items: center 或 justify-content，伪元素的 bottom: 0 可能因基线对齐失效而偏移。
常见错误现象：边框悬浮在文字下方几像素处，或随字体大小变化而抖动。
- 给按钮加
vertical-align: bottom（适用于 inline-flex 场景） - 更可靠的是改用
inset定位：inset: auto 0 0 0替代top/bottom/left/right单独写 - 若按钮高度由
line-height决定，伪元素的bottom值应配合box-sizing: border-box和明确height使用 - 调试时临时加
outline: 1px solid red到伪元素，看清它实际占位范围
position、少一行 transition、漏掉 transform-origin，效果就断掉。它不报错，只静默失败——得靠肉眼盯渲染结果，而不是看控制台。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
