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

fiddle

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

Answer 2

添加或替换以下属性（使:before和:after元素显示在.box申请z-index:-1后面，并使用默认z-index代替.box }）：

.box{
    position: absolute;
}
.box::before{
    z-index: -1;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
.box::after{
    z-index: -1;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

JSFiddle