如何与一个元素交互，而不是它的伪元素子元素？

Question

我正在尝试制作带有简单动画的汉堡包图标。密码是

* {
  box-sizing: border-box;
}
body {
  background-color: black;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}

.ham-wrapper {
  width: 100px;
  height: 100px;
  position: relative;
}

.hamburger {
  content: ' ';
  display: block;
  background-color: green;
  width: 80px;
  height: 8px;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 4px;
}

.hamburger:after, .hamburger:before {
  content: '';
  display: block;
  background: blue;
  width: 80px;
  height: 8px;
  position: absolute;
  top: 0;
  border-radius: 4px;
}

.hamburger:after {
  margin-bottom: 0;
  top: 0;
  margin-top: calc(8px + 16px + 16px + 8px);
  opacity: 0.5;
}

.hamburger:before {
  margin-top: calc(8px + 16px);
  margin-bottom: 0;
  top: 0;
}

.hamburger:hover {
  transition: all 3s ease;
  transform: scale(0.3);
  opacity: 0;
}

.ham-wrapper:hover .hamburger:after{
  transition: all 3s ease;
  margin-top: calc(8px + 16px);
  transform: rotateZ(-45deg);
}

.ham-wrapper:hover .hamburger:before {
  transition: all 3s ease;
  transform: scale(0.3);
  opacity: 0;
}

<div class="ham-wrapper">
  <i class="hamburger"></i>
</div>

但是当我旋转.hamburger时，整个图标都在旋转。我希望 .hamburger:hover 中定义的转换属性仅作用于 .hamburger，而不作用于 .hamburger:after 和 .hamburger:before。我尝试使用 position:absolute; 属性但它似乎不起作用。我找不到解决方案。

Answer 1

我认为您需要一种不同的方法。 CSS Tricks 关于 :before 和 :after 伪选择器有这样的说法：

"Note that the content is still inside the element they are applied to. The naming sort of feels like they might come, ya know, before or after the element, but it’s really before or after the other content inside."

如何与一个元素交互，而不是它的伪元素子元素？

How to interact with an element, but not its pseudo-element children?

html

css

css-selectors

pseudo-element

css-transforms