动画伪元素::悬停前

Question

我有下面的结构，一旦我将鼠标悬停在 h1 上，我想为帽子设置动画，我有下面的 css，它不起作用，不确定我在哪里做错了。

我如何才能仅使用 css 制作动画，因为我不想使用 JS。动画可以是缩放或倾斜的。

Codepen代码

.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); 
}

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

Answer 1

你

:hover

这里的部分是错误的，像这样使用它：

.wrapper h1:hover::before {
  cursor: progress;
  transform: scale(1.2);
}