user1607991 user1607991 - 4 months ago 8
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 {
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>




Answer

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::before,
.latest-work::after {
  width: 1px;
  height: 100px;
  content: '';
  background-color: #999;
}
<div class="latest-work">
    <span>latest work</span>
</div>

Comments