如何将伪元素放在父元素后面？

Question

我寻找解决方案并尝试了 this SO 的所有建议，但我都失败了。
我想在父元素后面做一个边框作为伪元素。

.member__profile-container {
  flex-basis: 50rem;
  position: relative;
  z-index: 4;
}

.member__profile {
  padding-top: 150%;
  background-image: url('../images/irene.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  box-shadow: 0 -1rem .5rem 1rem rgba(0,0,0,0.3);
  margin-right: 4rem;
  transform: rotate(-5deg) translateX(-10%);
  animation: expand 1s ease .5s forwards;
}

.member__profile:before {
  content: ' ';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  border: 10px solid white;
  transform: rotate(-5deg) translateX(-10%);
  animation: expand 1s ease .5s forwards;
}

<div class="member__profile-container">
  <div class="member__profile"></div>
</div>

结果如下，但边框必须在父元素后面。

NOT WORKING EXAMPLE

Answer 1

您需要对伪元素应用 negative z-index 值。

例如z-index: -6

工作示例：

div {
width: 100px;
height: 180px;
margin: 20px 60px;
background-color: rgb(255, 0, 0);
}

div::after {
content: '';
position: absolute;
top: -6px;
left: 2px;
z-index: -6;
width: 100px;
height: 180px;
margin: 20px 60px;
border: 6px solid rgb(0, 0, 0);
transform: rotate(-30deg);
}

<div></div>

进一步阅读：

https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

Answer 2

尝试为您的伪元素添加一个负的 z-index。

例如

.yourclass:: pseudoelement {
    z-index: -1;
}

Answer 3

为了让它工作，我不得不稍微修改一下你的 html。
因为 transformation in .member__profile 在这个级别创建了一个堆栈上下文，并且由于::before元素is a descendant of his element，z-index只会移动.member__profile内的伪元素。

HTML

 <div class="member__profile-container">
     <div class="member__profile"></div>

     <!-- moved the pseudo-element to a sibling element -->
     <!-- removing 'the transform' inside .member__profile and 
          keeping the pseudo element would also work -->

     <div class="member__undercover"></div>
 </div>

CSS

.member__profile-container {
  /* creating a stacking context on the parent */
  position: relative;
  z-index: 1;
  flex-basis: 50rem;
  /* added color to make position clearer */
  background-color: green;
}


.member__profile {
  position: relative;
  padding-top: 150%;
  background-image: url('../images/irene.jpg');
  /* added color to make position clearer */
  background-color: red;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  box-shadow: 0 -1rem .5rem 1rem rgba(0, 0, 0, 0.3);
  margin-right: 4rem;
  transform: rotate(-5deg) translateX(-10%);
  z-index: 0;
}

.member__undercover {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  border: 10px solid white;
  transform: rotate(-5deg) translateX(-10%);
  /* added color to make position clearer */
  background-color: blue;
  z-index:-1;
}

通过在容器上使用“position: relative; z-index: 1;”，我在这个级别上创建了一个堆叠上下文，并且可以自由地重新排序它是 z-index 的子级。
如果您使用 z-index 而不在容器中创建堆叠上下文，那么您将在文档中创建的其他地方使用堆叠上下文，或者如果 none 之前存在，则最终使用主体。
如果你想要容器后面的边框而不是配置文件，你只需要移动 "position: relative; z-index: 1;" up 一位父级（不是复制，是移动）。

要了解有关堆叠上下文的更多信息：MDN, The stacking context

如何将伪元素放在父元素后面？

How can I put pseudo element behind parent?

css

z-index

pseudo-element