Responsive Pipe Separator

Pipe separator disappears on resize.

by Chris Kilpatrick

HTML

<div>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>
</div>

CSS

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