I'm facing an issue with positioning my pseudo element behind its parent element. I want the red box to appear in front of the blue box.
#mobile-nav-icon {
position: absolute;
display: block;
height: 92px;
width: 93px;
background-color: red;
right: 16px;
top: 46px;
z-index: 2;
}
#mobile-nav-icon:before {
content: '';
top: -9px;
left: -10px;
background-color: blue;
height: 93px;
width: 97px;
position: absolute;
z-index: -1;
}
<div id="mobile-nav-icon">
<p>menu</p>
</div>
The output is not as expected, the text appears in front of the pseudo element while the parent's background remains hidden.
Any suggestions or solutions?