css 设置伪元素层级在父级下边

css伪元素，层级太高，挡住了父级子元素

父级div，伪元素before和after分别实现方框内的十字线。子集是一张图片，被伪元素遮挡住了。

<style>
#show_image{
   border: 1px solid rgba(0, 0, 0, 0.58);
    position:relative;
    width:100px;
    height:100px;
}
#show_image::before{
    content:"";
    position:absolute;
    left:50%;
    top:0;
    width:1.5px;
    height:100%;
    background-color: rgba(0, 0, 0, 0.58);
}
#show_image::after{
    content:"";
    position:absolute;
    left:0;
    top:50%;
    width:100%;
    height:1.5px;
    background-color: rgba(0, 0, 0, 0.58);
}
</style>
<div id="show_image" v-on:click="chooseImage()">
   <img style="width: 98px;height: 98px;;vertical-align:middle;" src="http://manage.jwta-iot.com/uploads/20200806/ae5f73cb0ababf08b1991a7f6ac96031.png">
</div>

解决办法一

伪元素添加 z-index: -1;（只能在定位元素上奏效）

<style>
#show_image::before{
	z-index: -1;
}
</style>

解决办法二

3D旋转效果（Z方向负向旋转，元素层级下降，Z方向垂直屏幕，X方向左右，Y方向上下）

<style>
 #show_image{
    transform-style: preserve-3d;	
}
#show_image::before{
    transform: translateZ(-1px);  
}
</style>