I encountered an issue where, despite adding a line using the "before" concept, the first list tag's left sideline is missing. The error output can be viewed here. The desired output should look like this: here
Here is the HTML Code:
<div class="top-sm">
<ul>
<a href="#"><li><i class="fab fa-facebook-f"></i></li></a>
<a href="#"><li><i class="fab fa-twitter"></i></li></a>
<a href="#"><li><i class="fab fa-linkedin-in"></i></li></a>
<a href="#"><li><i class="fab fa-youtube"></i></li></a>
</ul>
</div>
This is the corresponding Style:
.top-sm li{ display:inline-block; list-style:none;margin: 0;position:relative;padding: 15px 8px 0;}
.top-sm li:before{content:""; position:absolute;top:0;right: 6px;width:1px;height: 55px;background: white;}