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

CSS Menu Separator

Posted on Saturday February 11, 2012 by Eric Potvin

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!