设置伪元素的层级低于父元素层级

一般情况下，默认伪元素::after的层级在::before之上，并且伪元素的层级高于父元素。

设置伪元素层级在父元素之下有两种办法：

1. 使用3d转换。

 通过设置transform-style:preserve-3d;和transform:translateZ(-1px);，可以保证伪元素的层级只在父元素之下，而不在其他父辈的父辈之下。

.father{
  height: 50px;
  width:  50px;
  background:blue;

  transform-style:preserve-3d;

} 
.father::before {
  height: 50px;
  width: 100%;
  background:antiquewhite;
  
  transform:translateZ(-1px);

}

2.设置伪元素的z-index = -1。

.father{
}
.father::before{
    
    z-index: -1 
}