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 soul 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

Save this code for quick reference, or bookmark this URL — if you’re like me, you’ll need it each time you start a new project.

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 {...}