[웹디자인] 네비게이션

html

<ul class="menu">
  <li>
    <a href="/signin">Sign in</a>
  </li>
  <li>
    <a href="javascript:void(0)">About</a>
  </li>
  <li>
    <a href="javascript:void(0)">Message</a>
  </li>
  <li>
    <a href="javascript:void(0)">Friends</a>
  </li>
</ul>

css

ul.menu {
  display: flex;
}
ul.menu li {
  position: relative;
}
ul.menu li:not(:first-child)::before {
  content: '';
  width: 1px;
  height: 12px;
  background: black;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
}
ul.menu li a {
  display: inline-block;
  background: white;
  padding: 11px 16px;
  color: #656565;
}
ul.menu li a:hover {
  color: #000;
}

• li사이에 선은 가상요소 ::before를 사용하여 첫번째 요소를 제외한 요소에 absolute로 만들어 배치한다.
• a태그의 선택범위를 늘리기위해 padding을 주어 영역을 넓힌다.