Vertical dividers on horizontal UL menu

Question

I\'m trying to create a horizontal navigation bar (no dropdown, just a horizontal list), but I\'m having trouble finding the best way to add vertical dividers between the me

Answer 1

This works fine for me:

NB I'm using BEM/OCSS SCSS Syntax

#navigation{
  li{
     &:after{
        content: '|'; // use content for box-sizing
        text-indent: -999999px; // Hide the content
        display: block;
        float: right; // Position
        width: 1px;
        height: 100%; // The 100% of parent (li)
        background: black; // The color
        margin: {
          left: 5px;
          right: 5px;
        }
      }

      &:last-child{

        &:after{
          content: none;
        }

      }
  }
}