伪元素本身不能触发:hover，但可响应宿主元素的hover状态；动画失效常因属性不可动画、transition未写在宿主元素上或content缺失；需用transform/opacity等可动画属性，transition须声明在宿主选择器中，animation可写在伪元素内并配forwards。
伪元素（如 ::before、::after）本身不能直接触发 :hover，但可以响应其**宿主元素**的 hover 状态。若 hover 下伪元素的动画不生效，通常是因为属性不可动画、transition 未正确声明，或触发条件不满足。
确保伪元素的属性支持 transition/animation
不是所有 CSS 属性都能被过渡或动画。伪元素中常用的可动画属性包括：opacity、transform、color、background-color、width/height（需有明确初始/终值）、top/left（需配合 position）等。
以下属性无法过渡：
- display（none ↔ 其他值）
- content（完全不可动画）
- z-index（虽可设值，但无中间状态，视觉上无过渡效果）
- font-family、visibility（切换是瞬时的）
transition 必须写在宿主元素上，且包含伪元素目标属性
transition 不要写在 ::before 或 ::after 规则里（多数浏览器忽略），而应写在**宿主选择器**中，并明确指定要过渡的伪元素属性：
- ✅ 正确写法（transition 在宿主上，属性指向伪元素）：
.box {
position: relative;
}
.box::after {
content: '';
width: 0;
height: 2px;
background: #007bff;
transition: width 0.3s ease; /* ✅ 写在宿主规则下，但作用于伪元素 */
}
.box:hover::after {
width: 100%;
}- ❌ 错误写法（transition 放在伪元素内部）：
.box::after {
transition: width 0.3s; /* ⚠️ 大部分浏览器不支持，无效 */
}使用 animation 替代 transition（适合复杂动效）
当需要多步变化、循环、延迟或关键帧控制时，用 @keyframes + animation 更可靠。注意：animation 可安全写在伪元素规则内：
立即学习“前端免费学习笔记（深入）”；
@keyframes slideIn {
from { opacity: 0; transform: scaleX(0); }
to { opacity: 1; transform: scaleX(1); }
}
.box:hover::before {
animation: slideIn 0.4s forwards;
}关键点：
- 动画必须有 forwards（保持结束状态）或 both，否则 hover 离开后会回退
- 若需重新触发动画（比如每次 hover 都播放），可加 animation-play-state: running 或用 JS toggle class（因 CSS 动画默认不重复触发）
检查常见遗漏项
-
content 必须存在：伪元素若
content: none或空字符串且无尺寸，hover 时即使改宽高也看不到效果 -
定位与层叠：伪元素需有
position: absolute/relative才能用top/left/transform精确控制；必要时加z-index确保显示在上层 -
触发元素要有交互能力：
<div> 默认可 hover，但 <code><span></span>若无宽高/内容/display 设置，可能无法响应 hover —— 可加display: inline-block或设min-width -
避免重绘冲突：同时修改多个 layout 属性（如
width+height+margin）易引发强制同步布局，优先用transform和opacity提升性能
