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;
}
I like it (for obvious reasons) :D
However I do stick with using capitals to help break up the words and this is just one more way of doing it.
Swapping the colours for when moused over could be an interesting trick.
How about using span to get rid of the underlining of part of a link? I tried text-decoration:none; but it doesn’t work in browsers such as Firefox. It only works with Internet Explorer. Is there another way to do it?
Thanks.
You can do this one of two ways:
Firstly, the more frowned-upon way, using CSS hacks
text-decoration: none !important;Secondly, the way you actually approach the problem in the markup.
How about having the entire link inside
spans but without the desired underlined word.For Example:
<a href="#"><span>www.badger</span>football<span>forums.com</span></a>a {text-decoration: underline;} <br/>span {text-decoration: none;}