We wanted to have a primary navigation with a > seperator but didn't want the work of creating a (non-scaling) background image for the items. So we took our clean HTML
<!DOCTYPE html><html><head><title>Sample<link href="http://www.realwebdevelopers.com/css/screen.css" rel="stylesheet" type="text/css" /></head><body><header><h1>Real Web Developers<nav><ul class="clearfix"><li><a href="http://www.realwebdevelopers.com/">Home<li><a href="http://www.realwebdevelopers.com/">Candidates<li><a href="http://www.realwebdevelopers.com/">Recruiters<li><a href="http://www.realwebdevelopers.com/">About</ul></nav></header> ...
And used CSS content attributes to insert the > character before all but the first item. To put a non-breaking space before and after each > we used an escaped \a0 sequence (you cannot put mark-up into a content attribute).
...
html header:first-of-type li {
float: left;
}
html header:first-of-type li::before {
content: '\a0>\a0 ';
}
html header:first-of-type li:first-child::before {
content: '';
}...There are probably better ways of targeting the primary navigation but since we wanted this method to be easily ported we are targeting the <li> elements within the first <header> element in the page. Usually this will be the primary navigation, if not just change the CSS selector.
