伪元素（如 ::before）本身无法直接绑定 :hover，必须将 :hover 应用于其宿主元素（如 h1），再通过 h1:hover::before 选择器触发样式变化，配合 transition 即可实现纯 CSS 动画。
伪元素（如 `::before`）本身无法直接绑定 `:hover`，必须将 `:hover` 应用于其宿主元素（如 `h1`），再通过 `h1:hover::before` 选择器触发样式变化，配合 `transition` 即可实现纯 css 动画。
在 CSS 中，伪元素（::before 和 ::after）是依附于宿主元素生成的虚拟子节点，它们不独立存在于 DOM 树中，因此无法被用户直接交互——也就是说，::before:hover 这类写法语法合法但逻辑无效，浏览器根本不会响应伪元素自身的悬停事件。
正确做法是：将 :hover 状态施加在真实存在的父级元素（如 h1）上，再通过组合选择器 h1:hover::before 来控制伪元素的样式。这样，当鼠标移入 <h1></h1> 区域时，即使光标未精确落在伪元素图像上，也能可靠触发动画。
以下是修正后的完整示例（支持缩放、倾斜等变换）：
.wrapper {
width: 200px;
margin: 100px auto;
}
.wrapper h1 {
position: relative; /* 为 ::before 的绝对定位提供参照 */
padding-left: 40px; /* 预留图标空间，避免文字重叠 */
}
.wrapper h1::before {
content: url('https://i.ibb.co/Bg4jS5B/hat-1-e1713504486338.png');
display: inline-block;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%); /* 垂直居中对齐 */
width: 30px;
height: 30px;
transition: all 0.3s ease-in-out;
}
.wrapper h1:hover::before {
transform: translateX(5px) scale(1.3) skewX(5deg); /* 多重变换示例 */
filter: brightness(1.2);
}
<div class="wrapper"> <h1>About Us</h1> </div>
✅ 关键要点总结：
- ✅ 必须使用
h1:hover::before（而非h1::before:hover）； - ✅ 宿主元素（
h1）需设置position: relative，确保::before的position: absolute正确锚定； - ✅
transition必须定义在::before的默认状态中，而非hover状态下； - ✅ 推荐使用
transform+transition实现高性能动画（避免触发重排）； - ⚠️ 注意：若伪元素内容为
content: ""且无尺寸/背景，可能不可见或无法触发悬停区域——建议显式设置宽高或visibility。
通过这一模式，你还可以轻松扩展为旋转、位移、透明度变化等多种动效，全程无需 JavaScript，语义清晰、性能优异。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
