Add a separator after every menu item except the last with CSS

Every time you add a horizontal navigation to your website there is a high probability that this post will save you time.

Let’s say you have a nav that looks like this.

web site main nav with no separators

You need to add a right vertical bar to separate each menu item except the last one. It should look something like this:

web site main nav with separators

To do this you will find many solutions online and most of them won’t help you. Here’s the solution:

Add the following line to your custom CSS

[prettify]
li+li {
border-left: 1px solid #a63019;
}
[/prettify]

The rule says that whenever an li element follows after a previous li element, give that li element a left border. If that doesn’t make sense to you, read this article that explains all the gory details.

Leave a Reply

Your email address will not be published. Required fields are marked *