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:

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

The CSS

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

This will output:

No more excuses now!