伪元素默认不支持transition因其无DOM节点且不触发重绘；需用可动画属性（如transform、opacity）并由父元素状态驱动变化，同时确保初始值明确、定位正确。
伪元素
默认不支持 transition 是为什么
因为
和
生成的内容属于“非渲染元素”——它们没有 DOM 节点，浏览器不会为它们单独创建渲染层，更不会监听其样式变化。所以直接给
写
是无效的。
必须用「可动画属性」+「触发重绘」才能生效
transition 只对可动画的 CSS 属性起作用，且需该属性在元素上真实存在并发生改变。伪元素要动起来，得满足两个条件：
目标属性本身可动画（如
、
、
、
/
（需有明确初始值））
该属性必须通过父元素的 class 切换、hover 等方式被“间接修改”——即：伪元素的样式由父元素状态驱动
常见错误是写
却没在
中设置
值，或初始值是
（不可动画）。
正确写法：用 transform + opacity 最稳妥
和
是硬件加速属性，兼容性好、性能高，且无需定义宽高就能过渡。下面是一个按钮悬停时下划线从左滑入的效果：
立即学习
“
前端免费学习笔记（深入）
”；
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
注意点：
必须设
，否则伪元素不渲染
初始值不能是
，得是具体数值（如
）
如果用
，初始状态也要明确写
，不能依赖隐式值
多个 transition 属性建议合并写成
，避免
引发意外动画
遇到 transition 不触发？先查这三件事
伪元素过渡失败，90% 出在这几个地方：
父元素没设
（导致
的
定位错乱，动画起点/终点不可控）
伪元素的初始状态和 hover 状态之间，至少有一个可动画属性发生了「有效变更」——比如
可以，但
不行（
不可动画）
用了
但没留意：延迟只在「触发时」生效，如果 hover 离开太快，可能根本看不到动画开始
复杂交互动画（比如多段路径、旋转+缩放）建议优先用
+
，transition 对伪元素的支持始终有限制，别硬扛。
::before::after::beforetransition: all 0.3sopacitytransformbackground-colorwidthheight::before { transition: left 0.3s; }:hover::beforeleftautotransformopacity.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);
}contentwidthauto0transform: translateX()transform: translateX(-100%)transition: width 0.3s, transform 0.3sallposition: relative::afterabsoluteopacity: 0 → 1display: none → blockdisplaytransition-delay@keyframesanimation