https://i.sstatic.net/Dd7mO.pngI am trying to position the grey vertical line below the text "latest work". However, when I set the z-index to negative, it disappears. I believe it is going under the body. Is there a simple solution to this? Attached is an image of my mockup for reference. I have a div with a background color of #212121 so that the text "latest work" has padding above and below, giving the illusion that the line goes underneath.
body {
font-size: 16px;
background: #f9f9f9;
}
.container {
max-width: 1600px;
}
#dt-lpStatic {
height:60px;
width: 100%;
padding:6px 0;
font-family: 'Montserrat', sans-serif;
font-size: 0.875em;
text-transform: uppercase;
}
#dt-lpStatic ul {
float: left;
margin-top: 3px;
}
#dt-lpStatic ul li {
display: inline;
color:#545454;
margin-left:40px;
}
#dt-lpStatic ul li:nth-child(1) {
margin-left:0;
}
.subscribe-btn-muted {
padding:12px 50px;
border:2px solid #555;
border-radius: 13%/50%;
-webkit-border-radius: 13%/50%;
-moz-border-radius: 13%/50%;
float:right;
color:#555;
}
#hero {
width:100%;
background: #212121;
height:100vh;
}
#hero-content {
margin:30vh auto;
text-align: center;
}
#hero .secTitle-bg-dark {
width:200px;
padding: 15px 0;
font-family: 'Open Sans', sans-serif;
font-style: italic;
color: #555;
font-size: 1.5em;
font-weight: 300;
margin:30vh auto;
background: #212121;
}
.secTitle-bg-dark:after {
content:"";
position: absolute;
z-index: 0;
top: 65vh;
bottom: 0;
left: 50%;
border-left: 2px solid #313131;
}<body>
<section id="hero">
<header id="dt-lpStatic">
<div class="container">
<ul>
<li><img src="imgs/logo-muted.png" alt="RH logo"></li>
<li>Home</li>
<li>Blog</li>
<li>About</li>
<li>Get In Touch</li>
</ul>
<div class="subscribe-btn-muted">Subscribe</div>
</div>
</header>
<div id="hero-content">
<img src="imgs/logo-full-big.png" alt="RH Visual Design logo">
<div class="secTitle-bg-dark">latest work</div>
</div>
</section>
</body>