关于元素伪类 before after的z-inex问题

父元素和before/after伪类一起书写的时候，默认before/after伪类会在页面的上层，修改层级有两种解决方案，第一种方式是伪类设置 z-index:-1

.a{

}
.a:after{
    z-index: -1 
}

由于伪类设置了 z-index -1，当页面中别的元素，例如背景，就会覆盖伪类，导致伪类无法被看到。
第二种方案：

.a{
    transform-style: preserve-3d;
}
.a:after{
    transform: translateZ(-1px) // Z轴方向位移-1px
}