Edit in JSFiddle

<nav class="m1">
  <ul>
    <li><a href="#">Item #1</a></li>
    <li><a href="#">Item #2</a></li>
    <li><a href="#">Item #3</a></li>
    <li><a href="#">Item #4</a></li>
    <li><a href="#">Item #5</a></li>
  </ul>
</nav>

<nav class="m2">
  <ul>
    <li><a href="#">Item #1</a></li>
    <li><a href="#">Item #2</a></li>
    <li><a href="#">Item #3</a></li>
    <li><a href="#">Item #4</a></li>
    <li><a href="#">Item #5</a></li>
  </ul>
</nav>

.m1, .m2{
  margin:0;
  padding:20px;
  ul{
    display:flex;
    li{
      a{
        display:block;
        font: 13px/33px arial,verdana,tahoma;
        color:#333;
        text-decoration: none;
      }
    }    
  }
}

.m1{
  ul{
    padding: 0 15px;
    li{
      a{
        &:before{
          display: inline-block;
          content:'|';
          padding: 0 15px;
        }
      }
      &:first-child{
        a{
          &:before{
            display: none;
          }
        }
      }
    }
  }
}

.m2{
  ul{
    li{
      a{
        padding: 0 15px;
        border-left:1px #ccc solid;
      }
      &:first-child{
        a{
          border:none;
        }
      }
    }
  }
}