Responsive Pipe Separator

Pipe separator disappears on resize.

by Sree K

HTML

<div style="position:fixed">

<div id="test">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>
</div>

</div>

CSS

#test {
  overflow: hidden;
  margin: 1em;
 }
#test ul {
  list-style: none;
  padding: 0;
  margin-left: -4px;
 }
#test ul li {
  display: inline;
  white-space: nowrap;
}
#test ul li:before {
  content: " | ";
}