CODEWITHSUNDEEP
htmlcsspseudo-element
Mujtaba Fadhil
Mujtaba Fadhil

Reputation: 6116

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

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 : currently result

but I'm getting this JSFIDDLE what i want

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 :

enter image description here

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

Thanks in advance ...

Upvotes: 4

Views: 4780

Answers (2)

potashin
potashin

Reputation: 44581

Add or replace the properties below (to make :before and :after elements display behind .box apply z-index:-1 and use default z-index for .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);
}

enter image description here

JSFiddle

Upvotes: 3

Alex Char
Alex Char

Reputation: 33218

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.

Upvotes: 9

Related Questions