How can I separately style CSS 'content' elements?
Eric’s Question:
I have a nav list that looks like this:
Home / About / Locations / Contact
I’m coding it as a simple <ul> and using something like this for the separators:
#nav li:after {
content: "/";
}
However… the designer wants the current page that you’re on (the ‘active’ item in the nav) to be shown in bold and ask change to a different font. Something like this:
Home / About / Locations / Contact
This is easy enough to do with a separate style specifically for the active <li> item. However, here’s the problem: the separator character (“/”) also changes to bold and the new font, since it is considered to be part of the <li> item. This is bad… I want the separators to always look the same, regardless of which page is active. Is there a way to change that, or override the formatting on the separator? (Or a better way to code this with CSS that will accomplish what I’m trying to do?)
You can tell the / to have a normal font weight.
#nav li:after {
content: "/";
font-weight: normal;
}
