伪元素（如 ::before）本身无法直接绑定 :hover，必须将 :hover 应用于其宿主元素（如 h1），再通过 h1:hover::before 选择器触发样式变化，并配合 transition 实现缩放、倾斜等动画效果。
伪元素（如 `::before`）本身无法直接绑定 `:hover`，必须将 `:hover` 应用于其宿主元素（如 `h1`），再通过 `h1:hover::before` 选择器触发样式变化，并配合 `transition` 实现缩放、倾斜等动画效果。
在 CSS 中，伪元素（::before 和 ::after）是依附于宿主元素生成的内容，不具有独立的事件响应能力——因此 ::before:hover 这类写法是无效的，浏览器会直接忽略该规则。
正确做法是：将 :hover 状态施加在宿主元素上（例如 h1），再通过组合选择器 h1:hover::before 来定义伪元素在该状态下的样式。只要伪元素本身已声明 transition，就能实现流畅的 CSS 动画。
以下是修正后的完整示例（支持缩放与倾斜）：
.wrapper {
width: 200px;
margin: 100px auto;
}
.wrapper h1 {
position: relative; /* 确保 ::before 的 absolute 定位以 h1 为参考 */
padding-left: 40px; /* 预留图标空间，避免文字重叠 */
}
.wrapper h1::before {
content: url('https://i.ibb.co/Bg4jS5B/hat-1-e1713504486338.png');
display: inline-block;
width: 30px;
height: 30px;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
transition: all 0.3s ease-in-out; /* 关键：过渡必须定义在常态下 */
}
/* ✅ 正确写法：hover 作用于 h1，再影响其 ::before */
.wrapper h1:hover::before {
transform: translateY(-50%) scale(1.3) skewX(5deg);
cursor: pointer;
}<div class="wrapper"> <h1>About Us</h1> </div>
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 必须为宿主元素（
h1）设置position: relative（或非static定位），否则position: absolute的伪元素可能脱离预期布局； -
transition属性需写在::before的默认状态中，而非hover状态里，否则动画不会生效； - 若需更精细控制（如仅过渡
transform），推荐显式声明：transition: transform 0.3s ease-in-out，避免all带来意外性能开销； - 图标使用
content: url(...)时，建议同时设置width/height，防止加载抖动；也可改用background-image+aspect-ratio提升可控性。
总结：CSS 动画伪元素的核心逻辑是「状态委托」——把交互事件交给真实元素，再通过选择器链驱动伪元素样式更新。无需 JavaScript，纯 CSS 即可实现专业级交互动效。
