如何通过 CSS 实现伪元素 ::before 在父元素悬停时的平滑动画-html教程-PHP中文网

如何通过 CSS 实现伪元素 ::before 在父元素悬停时的平滑动画

伪元素（如 ::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 动画。

以下是修正后的完整示例（支持缩放与倾斜）：

CSS婚礼策划服务机构宣传网站模板

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 提升可控性。