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

My buddy Jermayn recently wrote a post (update: offline now) about best practices for writing out URLs with multiple words. This got me thinking there could be an easy way to do this with CSS just using the simple tag.

Let’s say you have a URL with three words like this:
www.badgerfootballforums.com

Those words kind of run together and leave something to be desired for basic readability. You could try something like:
www.BadgerFootballForums.com

But that’s really not much better and it perpetuates the idea that URLs are case-sensitive which of course they are not (at the top level).

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:

<a href="#">www.badger<span>football</span>forums.com</a>

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