Vertical dividers on horizontal List

I’ve lost count of the amount of times I’ve had to create a horizontal navigation menu with vertical dividers between the list items. The ones where the end result should look something like this:

Item 1 | Item 2 | Item 3 | Item 4 | Item 5

I’ve tried many different ways of achieving this but think that I’ve finally found the best method, so figured I would put it down in a blog post for anyone else who might be struggling with it. Alternatively, if you have an even better method then I’d love to know about it.

How to add vertical dividers on horizontal List items:

ul {
  li {
    display: inline-block;
    + :before {
      content: ' | ';
    }
  }
}

Please note that the above code example is written in a nested method for use in languages like Sass, but you can write it in longhand in CSS and it will still work fine.