Menu dividers

Here is a useful CSS technique to add menu dividers to your menus. > li:not(:last-child) {
	position: relative;
	padding-right: 0.6em;
} > li:not(:last-child) > a:after {
	border-right: 1px dotted #9b9b9b;
	content: "";
	height: 12px;
	width: 1px;
	display: block;
	position: absolute;
	right: -7px;
	top: 50%;
	margin-top: -5px;

In the above example, I am adding vertical dividers to a Footer Bar widget menu. The first bit of code adds some extra padding to the right of each menu item apart from the last. The second bit of code adds the dividers to the menu links (excluding the last menu link) through the use of the ::after pseudo-element.

Footer bar menu dividers
Footer bar menu dividers

You might want to adjust your paddings according to the menu you are working on. For dividers on the main menu, just replace the class with the .menu class!