Comment List w Horizontal Rule-like Heading
<div class="comment-label">Comments</div>
<ul class="comment-list">
<li>Cool comment</li>
</ul>
.comment-label {
background-color: white;
color: gray;
font-size: 13px;
margin: 0 auto;
position: relative;
text-transform: uppercase;
text-align: center;
top: 16px;
width: 100px;
}
ul.comment-list {
list-style: none;
margin-bottom: 20px;
& li {
margin-top: 25px;
padding: 5px 10px 20px;
border-bottom: 1px gray dotted;
&:first-of-type {
margin-top: 5px;
padding-top: 15px;
border-top: 6px gray solid;
}
&:last-of-type {
border-bottom: none;
}
}
}
Preview