为什么::before伪元素出现在元素之上？

Question

根据我的理解，::before应该出现在元素下方，并且::after应该出现在元素上方（就 z-index 而言）。

在下面的示例中，当鼠标悬停在按钮上时，我尝试使背景颜色变暗（而不是前景色）。即使我用过::before它仍然出现在前面。为什么？我知道我可以用 来修复它z-index，但是根据这个有 6 个赞成票的评论：

我认为最好使用 :before ，这样你就可以得到正确的堆叠顺序，而无需使用 z-index 。

我不应该这样做，而且顺序应该是正确的？

.parent {
  --my-color: red;  
}
button {
    color: blue;
    background-color: var(--my-color);
    padding: 8px 16px;
    position: relative;
}
button:hover {    
    background-color: transparent;
}
button:hover::before {
    display: block;
    content: "";
    position: absolute;
    top: 0; left: 0; width: 50%; height: 100%; /* width is 50% for debugging (can see whats below) */
    background-color: var(--my-color);
    filter: brightness(80%);
}

<div class="parent">
    <button type="button">CLICK ME</button>
</div>

Answer 1

z 索引或 z 轴顺序::before之间没有区别。::after默认情况下，两者都将放置在 其父级的前面，覆盖它（如果相应地定义了它们的位置）。要实现除此之外的 z 轴分层，您实际上需要使用z 索引（除了相对位置和绝对位置的组合）。

评论后补充：

在下面的代码片段中，情况有两种变化。唯一的区别是::after使用了一次，一次::before，两次都没有使用 ，z-index并且两次都有相同的结果，即伪元素覆盖其父元素：

.parent {
  --my-color: red;
}

button {
  color: blue;
  background-color: var(--my-color);
  padding: 8px 16px;
  position: relative;
}

button:hover {
  background-color: transparent;
}

.parent:nth-child(1) button:hover::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--my-color);
  filter: brightness(80%);
}
.parent:nth-child(2) button:hover::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--my-color);
  filter: brightness(80%);
}

<div class="parent">
  <button type="button">CLICK ME</button>
</div>

<div class="parent">
  <button type="button">CLICK ME</button>
</div>

因此，回到第二条评论中的问题：是的，他们错了 - 您需要使用z 索引将伪元素移动到父元素后面。

所以你的实际解决方案应该是这样的，使用伪元素的负数 z-index: -1;（你也可以::after在这里使用，没关系......）。

.parent {
  --my-color: red;
}

button {
  color: blue;
  background-color: var(--my-color);
  padding: 8px 16px;
  position: relative;
}

button:hover {
  background-color: transparent;
}

button:hover::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--my-color);
  filter: brightness(80%);
}

<div class="parent">
  <button type="button">CLICK ME</button>
</div>