user1607991 user1607991 - 1 year ago 67
HTML Question

::after won't stack below element

enter image description hereI need the grey vertical line to be underneath "latest work" work. When I set the z-index to negative though it disappears, I assume under the body? Hoping this is a simple solution. I attached an image of my mockup to show what it should look like. I have a div with a background of #212121 so the copy "latest work" has padding above and below and makes it look like the line goes underneath.

body {
font-size: 16px;
background: #f9f9f9;
.container {
max-width: 1600px;

#dt-lpStatic {
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;
#dt-lpStatic ul li:nth-child(1) {
.subscribe-btn-muted {
padding:12px 50px;
border:2px solid #555;
border-radius: 13%/50%;
-webkit-border-radius: 13%/50%;
-moz-border-radius: 13%/50%;
#hero {
background: #212121;
#hero-content {
margin:30vh auto;
text-align: center;
#hero .secTitle-bg-dark {
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 {
position: absolute;
z-index: 0;
top: 65vh;
bottom: 0;
left: 50%;
border-left: 2px solid #313131;

<section id="hero">
<header id="dt-lpStatic">
<div class="container">
<li><img src="imgs/logo-muted.png" alt="RH logo"></li>
<li>Get In Touch</li>
<div class="subscribe-btn-muted">Subscribe</div>
<div id="hero-content">
<img src="imgs/logo-full-big.png" alt="RH Visual Design logo">
<div class="secTitle-bg-dark">latest work</div>

Answer Source

This is actually a really great candidate for flexbox. You can simplify the code a lot just by doing this:

Edit: Just a friendly tip: Psuedo-elements should be prefixed with ::, like ::before and ::after. Psuedo-selectors only have one colon, like a:hover and input:focus.

body {
  background-color: #333;

.latest-work {
  color: #999;
  display: flex;
  flex-direction: column;
  align-items: center;

.latest-work span {
  display: block;
  padding: 10px 0;

.latest-work::after {
  width: 1px;
  height: 100px;
  content: '';
  background-color: #999;
<div class="latest-work">
    <span>latest work</span>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download