伪元素过渡需将transition声明在基础选择器中，而非:hover等状态内；仅支持transform、opacity等可插值属性；content值必须始终存在且类型一致。
伪元素本身不能直接加 transition，但可以生效
这是最常被误解的一点：::before 和 ::after 不是真实 DOM 节点，所以你不能指望给它们单独挂载过渡逻辑。但浏览器在渲染时，只要伪元素的样式变化满足「可插值」+「transition 声明存在」两个条件，它就会执行过渡。
关键不是“能不能写”，而是“写在哪、怎么触发”。下面这些写法看似一样，效果天差地别：
-
::after { transition: opacity 0.3s; }—— 无效：没有初始状态绑定，浏览器不追踪 -
.el::after { transition: opacity 0.3s; }—— 有效：声明在基础规则里，且.el:hover::after改变opacity时会过渡 -
.el:hover::after { transition: opacity 0.3s; }—— 无效：只进不出，移出瞬间跳变
必须把 transition 写在伪元素的基础选择器中
也就是说，transition 必须和伪元素的默认样式（非 :hover 等状态）写在同一组 CSS 规则里。否则鼠标移开时，浏览器找不到「回退的过渡依据」。
正确结构示例：
立即学习“前端免费学习笔记（深入）”；
.button {
position: relative;
}
.button::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: #007acc;
transition: width 0.3s ease, background-color 0.3s ease;
}
.button:hover::after {
width: 100%;
background-color: #0056b3;
}
-
transition在.button::after基础规则中定义，不是:hover里 - 用
width替代transform: scaleX()也可以，但后者性能更好（合成层处理） - 多个属性过渡必须用逗号分隔，漏掉空格或逗号会导致整条
transition失效
优先使用 transform 和 opacity，避免 layout 触发
伪元素过渡卡顿，90% 是因为选了高代价属性。比如用 left 或 top 移动伪元素，每次变化都会触发重排；而 transform: translateX() 只走合成层，丝滑不掉帧。
- ✅ 推荐：
transform、opacity、background-color - ⚠️ 慎用：
width、height、margin、padding（尤其在高频悬停场景） - ❌ 完全不行：
display、visibility、z-index（不可插值，无中间态）
例如实现「下划线从左滑入」，写成：
.link::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: currentColor;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.link:hover::after {
transform: scaleX(1);
}
content 必须始终存在，且值类型要一致
伪元素的 content 属性如果从 "" 变成 "→"，或从 none 变成字符串，浏览器无法计算中间态，transition 会直接失效——看起来就是“闪现”。
- 确保
content在基础规则和状态规则中都存在（哪怕都是""） - 不要在
:hover中动态添加content，比如从无到有显示图标 - 如果要用图标，统一用字体图标或 SVG data URL，并保持
content值不变，只改opacity或transform
一个易忽略的坑：content: attr(data-label) 如果属性值为空或缺失，也可能导致伪元素“消失再出现”，破坏过渡连贯性。
