July 23, 2013

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;
}

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!