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

Published November 3, 2007 by Chris Coyier

My buddy Jermayn recently wrote a post 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 <span> tag.

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

Those words kind of run together an 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-sensative 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;
}