Simple CSS footer menu

Ever been tempted to hard code pipe characters (vertical bars) between anchor tags to quickly produce a simple menu? Here I am in an effort to stop you.

The markup you could use and the one you should use

This is the quick and dirty (semantically challenged I’d say) markup you could use for a secondary navigation like a footer menu:

<a>Privacy Policy</a> | <a>Terms of Use</a> | <a>Contact</a>

…See those pipe line separation characters? Their sole purpose is to visually delimit elements. They have no business in the markup.

And this is the elegant markup (you already know) you should use:

<ul>
 <li><a>Privacy Policy</a></li>
 <li><a>Terms of Use</a></li>
 <li><a>Contact</a></li>
</ul>

So elegant you’ll wanna wear it to a wedding.

The CSS code

ul { margin:0; padding:0;
 color:#000; /* Base text color for the menu */
}
ul li { float:left; list-style:none; /* Makes the list items go horizontally in lieu of default vertical display */ }
ul li:after {
 content:"|"; /* Or go Facebook style and use "·" (the interpunct character) for separators */
 color:#666; /* You may want to make the separators a bit more subtle than the base text color */
}
ul li:last-child:after { content:""; /* No separator for the last item in the list */ }
ul li a {
 margin:0 8px; /* Set margins around the links */
 color:blue; /* Text colors for the links */
}

JSFiddle link

Notes

The above CSS snippet will affect all unordered lists on your page. I intentionally left it like that so you can change it to something more specific like:

#footer ul {...}
#footer ul li {...}
#footer ul li:after {...}
#footer ul li:last-child:after {...}
#footer ul li a {...}