我需要灰色垂直线位于“最新作品”作品下方。当我将 z-index 设置为负数时，虽然它消失了，但我假设在 body 下方？希望这是一个简单的解决方案。我附上了我的模型图像以显示它应该是什么样子。我有一个背景为 #212121 的 div，因此副本“最新作品”在上方和下方都有填充，使其看起来像是线在下方。
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>最佳答案
这实际上是 flexbox 的一个非常好的候选者。只需这样做，您就可以大大简化代码:
编辑:只是一个友好的提示:伪元素应该以 :: 为前缀，例如 ::before 和 ::after。伪选择器只有一个冒号，如 a:hover 和 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>关于html -::after 不会堆叠在元素下方，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38578900/