【CSS】实现伪元素层级在父元素之下

问题描述

伪元素默认层级是在父元素之上的，同时 ::after在::before之上，若要实现伪元素层级在父元素之下，则可通过以下方式实现

1. 方法一：使用z-index

设置层级为负数，则该元素便位于最下层，但是此方法有一个问题，就是如果还要它在其他元素的上层，则还需要调整其他元素的层级，如果元素嵌套很多，则需要设置一连串的z-index

2. 方法二： 3D转换

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