Я хочу добавить вертикальную линию до и после тега списка. Первый тег списка перед вертикальной линией не работает

Question

Я добавил строку, используя концепцию before, но левый боковой край первого тега списка отсутствует. Вывод ошибки: https://prnt.sc/pjilp5 Требуется вывод I, например: https://prnt.sc/pjim1p

HTML-код:

    <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>

Стиль:

    .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;}

Answer 1

Вам необходимо обновить HTML его not valid HTML, а для строки вы можете использовать border проверку свойства ниже фрагмента.

.top-sm li {
  display: inline-block;
  list-style: none;
  margin: 0;
  position: relative;
  padding: 15px 8px 0;
  border-left: 1px solid #000;
}

.top-sm li:last-child {
  border-right: 1px solid #000;
}

<div class="top-sm">
  <ul>
    <li><a href="#"><i class="fab fa-facebook-f"></i>1</a></li>
    <li><a href="#"><i class="fab fa-twitter"></i>2</a></li>
    <li><a href="#"><i class="fab fa-linkedin-in">3</i></a></li>
    <li><a href="#"><i class="fab fa-youtube"></i>4</a></li>
  </ul>
</div>