Creating Nice '|' Divided Menus with CSS

Home      |          Contact        |         FAQ         |         Other         |        Crap

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="#">Homea>li>
    <li><a href="#">Contacta>li>
    <li><a href="#">FAQa>li>
    <li><a href="#">Other Crapa>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.