Wednesday, November 17, 2010

Quick CSS Trick: Using Span to Break Up Words in URLS


How about breaking up the words in the URL with color? Check it out:
www.badgerfootballforums.com

I think that works pretty well, and it is something that can be achieved very easily with a little CSS:

a span { color: #971212; }

Then in your anchor link in your HTML just wrap the word you want colored in a span like so:

www.badgerfootballforums.com

To extend this concept a bit, how about the colors reverse themselves upon rollover? Like so:

Just do this in your CSS:

a { color: black;}
a span { color: #971212; }
a:hover { color: #971212; }
a:hover span { color: black; }

Source at : http://css-tricks.com/quick-css-trick-using-span-to-break-up-words-in-urls/