显示Div在:: before和:: after之后？

Question

我正在尝试在我的页面div中显示它::before和::after CSS选择器,所以我正在努力得到这个结果:

但是我得到了这个JSFIDDLE

这是我的代码:

HTML

<div class="box"></div>

CSS

.box{
    width: 350px;
    height: 350px;
    background: #555;
    position: absolute;
    top: 50px;
    left: 200px;
    z-index: 10;
}
.box::before{
    content: "";
    background: #A60000;
    width: 300px;
    height: 300px;
    position: absolute;
    top: 25px;
    left: -150px;
    z-index: 1;
}
.box::after{
    content: "";
    background: #02047A;
    width: 300px;
    height: 300px;
    position: absolute;
    top: 25px;
    left: 200px;
    margin: auto;
    z-index: 1;
}

我知道它div显示在其内容上显示,因为Chrome向我显示HTML源代码,如下所示:

但我希望有办法解决这个问题..

提前致谢 ...

Answer 1

更改您的CSS以遵循:

.box{
    width: 350px;
    height: 350px;
    background: #555;
    position: absolute;
    top: 50px;
    left: 200px;
}
.box::before{
    content: "";
    background: #A60000;
    width: 300px;
    height: 300px;
    position: absolute;
    top: 25px;
    left: -150px;
    z-index: -1;
}
.box::after{
    content: "";
    background: #02047A;
    width: 300px;
    height: 300px;
    position: absolute;
    top: 25px;
    left: 200px;
    margin: auto;
    z-index: -1;
}

小提琴

所有你需要做的是设置z-index :after并:before以-1和删除.box z-index.