CSS Vertical Bar Divider in a Menu

You might have a standard menu in your header that just lists the links next to each other with space between them and you need to add some sort of separator. A common one to use is a vertical bar, also known as a “post”. Adding a vertical bar divider to your website’s menu is pretty simple to do with CSS. I’m going to show you two ways that you can do this that can result in slight visual differences. Both methods shown below are assuming that you are using a menu structure that has each menu item wrapped in an <li> tag, but it could certainly be modified to work with any menu structure.

Vertical Bar Divider Method 1

This first method uses the ::after selector to insert an element after each menu item. In this case we are using a vertical bar or post, but we could insert any sort of symbol here to use as a divider such as a bullet point or a dash. Depending on the space you may just need to add some additional CSS to the code below to align the bars vertically with the menu text. We also use the :last-child selector to prevent the right bar from displaying to the right of the last menu element.

#main-menu li::after {
content: "|";
float: right;
color: #fff;
}
#main-menu li:last-child::after {
display: none;
}

Vertical Bar Divider Method 2

The second method is using a right border on the <li> element. As you can see in the example, this style of border would extend the full height of the <li> element which can result in it being taller because of any padding being used. Here we again also use the :last-child selector to prevent the right border from displaying on the last menu element.

#main-menu li {
border-right: 1px solid #ffffff;
}
#main-menu li:last-child {
border-right: none
}

Wrap-up

These two quick ways to add visual separation to your menu items are simple and can be customized to your liking. Whether that be by symbol used, size, color, or something else entirely, it’s up to you to decide what looks best. If your menu is currently bare, then go on and add some vertical bar dividers in there for some visual benefits!