Text Separators for LI Elements

Question

I'd like to add a forward slashes ('/') between my li elements, but I'm not sure of the best way to do that semantically. Right now, I'm simply including the forward slash in the li tag and adding spacing with non-breaking spaces, like so:

<ul id="footer_menu">
    <li>Customer Support&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>
    <li>Shipping Info&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>
    <li>Size Charts&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>
    <li>Privacy Policy&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>
    <li>Contact</li>
</ul>

What do you think? Thanks.

Answer 1

You can use pseudo-elements to include text after an element and you can use CSS3 selectors to remove the trailing slash from the last element.

#footer_menu li:after {
    content: "/";
}
#footer_menu li:last-child:after {
    content: "";
}

EDIT:

The whole thing can be done in one line with better CSS3.

#footer_menu li:nth-child(n+2):before {
    content: "/";
}

EDIT: EDIT:

It's even easier than that.

#footer_menu li + li:before {
    content: "/";
}