가상클래스를 이용하여 메뉴 사이 '|' 넣기

의미없는 기호는 가상클래스를 이용하여 만들어 줍니다.

<div class="nav-goto">
  <h2 class="blind">중요 메뉴</h2>
  <ul class="link-goto">
    <li><a href="#">about</a></li>
    <li><a href="#">contact</a></li>
  </ul>
  <h2 class="blind">sns 바로가기</h2>
  <ul class="link-sns">
    <li><a href="#"><i class="lab la-facebook-f"></i><span class="blind">facebook</span></a></li>
    <li><a href="#"><i class="lab la-twitter"></i><span class="blind">twitter</span></a></li>
    <li><a href="#"><i class="lab la-instagram"></i><span class="blind">instargram</span></a></li>
  </ul>
</div>

---

.link-goto {
    margin-bottom: 20px;

    a {
        padding: 0 5px;
        font-size: 1.2em;
        letter-spacing: -0.1em;

        &::before {
            content: "";
            display: inline-block;
            width: 1px;
            height: 17px;
            background: $dk;
            margin: -2px 20px 0 20px;
            vertical-align: middle;
        }
    }

    li {
        &:first-child {
            a {
                &::before {
                    display: none;
                }
            }
        }
    }
}