在其 ::before 和 ::after 上显示 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 中删除。

Answer 2

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

.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