Creating Nice '|' Divided Menus with CSS

it is common for websites (this one included) to have the ubiquitous '|' as a link divider, here is a neat way to do it with pure css

To get this menu:

You dont need to actually put in the '|' character, you can do it with just the following advanced css selectors:
<style type="text/css">
	ul#nav li{
		float:left; 
		margin-right:20px;
	}
	
	ul#nav li:after{
		content:'|';
		margin-left:20px;
	}
	
	ul#nav > li:last-child:after{
		content:'';	
		margin-left:0;
	}
</style>

<ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">FAQ</a></li>
    <li><a href="#">Other Crap</a></li>
</ul>

I realize it's not exactly space-saving, but it is a cool trick that could be adapted to all sorts of possible situations.

Comments (3) -

  • I don't know if this is important or not, but neither in your example above (as seen in the page) nor in my own experiment using your sample code does the pipe character actually appear.  What is up with that?  
  • This is odd.  It wasn't working inside of SharpReader (a .NET-based RSS reader), nor inside the browser on HomeSite 5, nor on IE8 browsing the html page HS5 saved, but navigating to your page directly with IE8 it was working.  I am puzzled at all this.  I would guess that SharpReader and HomeSite aren't rendering CSS (both products are abandonware) correctly, although this doesn't explain IE8 not rendering the HS5-created page as expected.  Hmmm.
  • Ican only imagine it would be the browser - I was using Chrome when I tested it.  This is purely a CSS 3 method.
Comments are closed