如何在hover h1时用CSS为::before伪元素添加动画？

AI 小北

2026-6-25

问题

我有如下页面结构，希望鼠标悬停在h1元素上时，为其::before伪元素添加动画（如缩放或倾斜效果）。目前我编写的CSS代码无法生效，不知问题出在哪里？如何仅用CSS实现该动画，不使用JavaScript？

原代码示例

HTML

<div class="wrapper">
  <h1>About Us</h1>
</div>

CSS

.wrapper{
  width:200px;
  margin:100px auto;
}
.wrapper h1::before {
  content: url('https://i.ibb.co/Bg4jS5B/hat-1-e1713504486338.png'); 
  display: inline-block;
  margin-left: -25px; 
  margin-top: -35px; 
  width:30px;
  position: absolute;
  /*filter: brightness(0) invert(1);*/
  transition: all 0.3s ease-in-out;
}
.wrapper h1::before:hover {
  cursor:progress;
  transform: scale(1.2); 
}

问题原因

你的CSS选择器逻辑错误：.wrapper h1::before:hover表示只有鼠标悬停在伪元素自身区域时才会触发样式变化，而不是悬停在h1元素上触发伪元素的动画。伪元素是依附于父元素的，无法单独作为hover触发主体来控制自身样式变化。

解决方案

将hover事件绑定到父元素h1上，再通过选择器控制伪元素的样式，就能实现鼠标悬停h1时伪元素播放动画的效果。

修正后的完整代码

HTML（无需修改）

<div class="wrapper">
  <h1>About Us</h1>
</div>

CSS

.wrapper{
  width:200px;
  margin:100px auto;
}
.wrapper h1::before {
  content: url('https://i.ibb.co/Bg4jS5B/hat-1-e1713504486338.png'); 
  display: inline-block;
  margin-left: -25px; 
  margin-top: -35px; 
  width:30px;
  position: absolute;
  transition: all 0.3s ease-in-out;
}
/* 关键改动：监听h1的hover状态，控制伪元素的样式 */
.wrapper h1:hover::before {
  cursor: progress;
  transform: scale(1.2); 
}