html - 在其::之前和::之后显示 Div？

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;
}

fiddle

您所要做的就是将 z-index :after 和 :before 设置为 -1并从 .box z-index 中删除。