showing Div over its ::before and ::after?

Question

I'm trying in my page to make div be shown over its ::before and ::after CSS selectors, so I'm working to get this result :

but I'm getting this JSFIDDLE

Here is my code :

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

I know it looks like making div shown over its content because Chrome is showing me the HTML source like this :

but I hope there is a way to fix that ..

Thanks in advance ...

Answer 1

Change your css to follow:

.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

All you have to do is to set z-index :after and :before to -1 and remove from .box z-index.