css hover 一个元素而不影响 :after

Question

如何阻止伪元素受到 parent 悬停的影响？

.list-item {
  position: absolute;
  background: black;
  color: white;
  padding: 10px 20px;
  transition: all 250ms ease-in-out;
}

.list-item:hover {
  transform: scale(1.5);
}

.list-item:after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background: orange;
  z-index: 10;
  border-radius: 100%;
}

<div class="list-item">
  test
</div>

悬停时，它会将所有悬停效果应用于 :after 伪元素

Answer 1

一种方法是对 ::after 伪元素应用相反的过渡:

.list-item:hover {
    transform: scale(1.5);
}

.list-item:hover::after {
    /* transform: scale(calc(1 - (your main scale amount - 1) / 2)); */
    transform: scale(0.75);
}