A Non-Annoying a:visited Technique

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Update: a few years after this was published, it was revealed that the :visited selector could be a security issue. It’s now much more limited in what you can do with the selector:

color, background-color, border-*-color, and outline-color and the color parts of the (SVG) fill and stroke properties

I’ll leave this article up for posterity though. You can still do use the selector and be non-annoying with it.

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).