Power of CSS

Zeldman points to a pretty nifty trick cooked up by Stuart Robertson over at Design Meme.

With just a couple of lines of code, mousing over a paragraph causes all links in that paragraph to be displayed with an underline. No javascript; just CSS and a modern browser.

I prefer to not see web pages where every link on the page is underlined. It’s distracting and not visually appealing. Accordingly, I set my browsers (and design my web pages) so that only mousing over a link causes the underline to be displayed.

What I like about this solution is that links are highlighted a paragraph at a time. It helps ensure links aren’t overlooked; I sometimes link memepool/mefi style, w/many links per paragraph. This is also a nice compromise compared to all links on a page being underlined or only one link being so displayed.

Stuart actually adds color in addition to the underlining, but I only used the “paragraph hover” bit as shown below (the entire code set is at his site, see prev. link). I had recently changed my link colors and also made links bold, in an effort to make them more visible (the old colors blended into the bodytext too much). That helped (though I’m not sure I’m done tweaking the colors), and this new addition really makes the links stand out!

/* Links within paragraphs (revealed) */
p:hover a {
color: blue;
text-decoration: underline;
}