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

Question

根据我的理解，

::before

应该出现在元素下方，

::after

应该出现在元素上方（就z-index而言）。

在下面的示例中，当鼠标悬停在按钮上时，我尝试使背景颜色变暗（而不是前景色）。即使我使用了

::before

它仍然出现在前面。为什么？我知道我可以用

z-index

修复它，但是根据 this comment 有 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

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

评论后补充：

在下面的代码片段中，情况有两种变化。唯一的区别是使用一次

::after

，一次

::before

，两次 without a

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-index 将伪元素移动到父级后面。

所以你的实际解决方案应该是这样的，使用 negative

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>

Answer 2

要使伪元素在悬停时出现在父元素后面，您需要从父元素（在您的情况下为按钮）中删除 z 索引，并将 z 索引给您的祖父元素（在您的情况下为 .parent）

这是更新的代码

    .parent {
  --my-color: red; 
  z-index: 1; 
}
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%; 
  background-color: var(--my-color);
  filter: brightness(80%);
  z-index: -1;
}