Separators between elements without hacks

Use this:

#menu span + span {
    border-left: solid black 1px;
}

http://jsfiddle.net/thirtydot/QxZ6D/

That will apply border-left to all except the first span.

The adjacent sibling selector (+) is supported in all modern browsers except IE6.

---

Another way to do it is this, which is sometimes nicer because you can keep all the declarations for the "menu buttons" in one block:

http://jsfiddle.net/thirtydot/QxZ6D/1/

#menu span {
    border-left: solid black 1px;
    /*
    a: bunch;
    of: stuff;
    */
}
#menu span:first-child {
    border-left: 0
}

This has exactly the same level of browser support as the first solution.

Note that if you like this solution, it's better to use :first-child rather than :last-child, because :first-child (from CSS2) is supported in IE7/8 and :last-child (only introduced in CSS3!) isn't.

you can do like this also:

span {position:relative; margin-left:5px}

span:after {
    content:"|";
    position:absolute;
    left:-5px;
}
span:first-child:after {
    content:"";
}

In this method you can also use others separators like / , \ , .

http://jsfiddle.net/sandeep/UNnxE/