Grow your CSS skills. Land your dream job.

A Non-Annoying a:visited Technique

Published by Chris Coyier

As you may know, you can define a style for a:visited in your CSS, which will apply itself to links in visitors browsers that they have already visited. The usefulness of this is debatable, but no matter what, it's best to not apply anything really bold or distinct to this style. At best, it could be a slight annoyance to your visitors. At worst, it might confuse them to the point they don't return.

Web trends have generally moved away from underlining links as well. At least for links in the middle of content. It's much more hip to apply a different color. Or perhaps, a different font-weight.

I propose this very non-annoying way of handling links inside post content:

p {
	color: #666666;
}

a { 
	font-weight: bold;
	text-decoration: none;
	color: #2a2a2a;
}

a:visited {
	font-weight: normal;
}

a:hover {
	text-decoration: underline;
}

nonannoyingvistedlinks.gif

In this example, all links are a slightly darker shade of gray. Unvisited links are bolded, while visited links return to a normal font-weight and thus melt back into the content a little nicer.

This technique is definitely going to be used in the new version of CSS-Tricks (hint, hint).

Comments

  1. Permalink to comment#

    nice tips.

  2. Permalink to comment#

    No underlines?

  3. Permalink to comment#

    The rollover underlines.

  4. Permalink to comment#

    Oh, I mean, if the readers don’t hover their cursor over the link, they might think the bolded text are ‘emphasized’ text instead of hyperlinks?

  5. Permalink to comment#

    That’s true, but I think, in a way, a link is an emphasis. There is just something that bugs me a little about underlines muddying up the typography. Imagine a page in a paperback book. Clean, well spaced text. Now imagine if 10 of those words had a big long line underneath them. I realize you can’t hyperlink a book, but I’m talking about pure aesthetics.

    Also, underlines create a weird cadence when reading that has always bugged me.

  6. Permalink to comment#

    I propose that we underline links… text-decoration: underline works well… or text-decoration: none; border-bottom: 1px dotted black; for unvisited links and “gray” or “silver” for visited…

    Usability and experience are key factors. After all, if you’re not going to cue your users that a word is a hyperlink (by staying within conventions), how can you expect them to mouseover them, let alone click them?

    http://www.JoeLevi.com

  7. Permalink to comment#

    Hey Joe,

    I think you raise a good point that it might be of benefit to all users if there was a standard established. I think my opinion leans away from that, just because I think the design of a site should dictate the style of the links more than some standard.

    I notice your own site doesn’t have underlined links =)

  8. I tend to agree with the people who suggest using underlines with non-visited links (think visited is ok but would suggest keep underlines). Without using underlines it is harder to know what is a link or not, brings your accessibility down and means you cannot use bold/ strong for your text which can limit your SEO capabilities as well.

    You can enlarge the length between lines of text as well which means underlined text does not appear to squashed.

  9. Underlining is a typographical abomination. IMHO.

  10. @Graham, but you need to remember this is not print, it is the web! They are different, very different!

    The web like print has certain rules and ways things are positioned and done. Underlined is one of them.

  11. I like underlined links inline with content. What bugs me is different font weights.

    Thanks for the tips!

  12. Permalink to comment#

    Interesting to know.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".