i want to create background using pseudo element :after, and i use z index to set the order so that it is below the other elements, but not working
body {
background: #000;
}
.container {
width: 375px;
height: 700px;
background-color: white;
margin: auto;
position: relative;
}
.container::after {
content: "";
width: 375px;
height: 150px;
background-color: pink;
display: inline-block;
position: absolute;
top: 0;
opacity: .75;
z-index: 1;
}
.nav {
background-color: green;
z-index: 9;
}
.header {
z-index: 8;
}<div class="container">
<div class="nav">
<h1>Lorem, ipsum dolor sit amet consectetur adipisicing.</h1>
</div>
<div class="header">
<h2>Lorem ipsum dolor sit.</h2>
</div>
</div>