rss feed Twitter Page Facebook Page Github Page Stack Over Flow Page

CSS Menu Separator

Remember back in the old days when we had to create images or add a "special div" to separate items in a menu?

Well, here's a quick and easy way to implement a nice menu without using these extra annoying images or text

The Menu

First, let's build the menu:

 <a href="#">Menu 1</a>
 <a href="#">Menu 2</a>
 <a href="#">Menu 3</a>
 <a href="#">Menu 4</a>


* {
  outline: none;
nav a {
  color: black;
  margin: 0 0 0 10px;
  padding: 0;
  text-decoration: none;
nav a:after {
  content: "|";
  margin-left: 12px;
nav a:last-child:after {

This will output:

No more excuses now!