Create a ‘|’ bar Separated Horizontal Menu with CSS3

A simple CSS3 code that will generate a menu like this:  Home | About | Contact | Sitemap – each link separated with ‘|’ (vertical) bar.

<style type="text/css">
ul#nav li{
float:left;
margin-right:20px;
list-style:none;
}

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="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Sitemap</a></li>
</ul>

For a demo, copy the entire code and paste into the Live HTML Editor.