[CSS] 가상선택자로 '|' 만드는 방법

메뉴 | 메뉴 | 모양의 바모양을 가상선택자로 만드는 방법

<header>
  <nav>
    <h1>LOGO</h1>
    <ul>
      <li><a href="/">menu1</a></li>
      <li><a href="/">menu2</a></li>
      <li><a href="/">menu3</a></li>
      <li><a href="/">menu4</a></li>
    </ul>
  </nav>  
</header>

* { margin: 0; padding: 0; box-sizing: border-box; }
li { list-style: none; }
a { text-decoration: none; color: inherit; }

nav { width: 800px; height: 40px; margin: 0 auto; background: #e1e1e1; display: flex; }
nav h1 { align-self: center; font-size: 14px; }
nav ul { margin-left: auto; display: flex; justify-content: center; align-items: center; }
nav ul li { position: relative; margin: 0 20px; }
nav ul li::before { display: block; content: ''; position: absolute; top: 0px; bottom: 0px; right: -20px; width: 4px; background-color: #888; }
/* before에 height를 주지 않아도 top/bottom에 값을 주면 형성된다.  */