With the using of the :visited pseudo-class you can select and style the visited links. The styling means that your users can easily separate the visited from the non-visited links.

This topic is not the hottest or the advanced one; it is just a little building block that can help the users to avoid unnecessary cycles when they navigate to the same post again and again.

The most famous example of the visited link styling is Google’s search page where you see the visited links in purple color (this is quite like the browser’s default behavior). Google’s method just changes the links colors, but the whole page will be more useable.

Naturally, you don’t have to style all of your visited states. In your main navigation it would be gawky but modify your articles header links is a good idea.

Limitations

For privacy and security reason the browsers limit the applied CSS stylings so a third party malicious code can’t sniff (with the help of getComputedStyle) by the formatting what pages the user visited.

When you use some color value, you can define transparency, in this case, it not going to work.

You can’t use the links ::before and ::after values.

Nice to know that the visited state comes from the browser’s history so you can see the visited formatting although you didn’t click on a particular link.

Usage

You can style the following properties when using the :visited pseudo-class:

  • color
  • background-color
  • border-color (and border color for separate sides)
  • outline-color
  • column-rule-color
  • the color parts of fill and stroke.

To properly format the links you need to follow the LVHA-order: :link, :visited, :hover, :active.

When you use the background-color property, you must apply to the non-visited link. Otherwise, it will not be going to work when you format the :visited state.

Formatting examples

With the available properties it is hard to make something visually pleasant and unique, but fortunately, there are some excellent writing about pushing the limit.

Text with the help of ::after

Una Kravets wrote an excellent article about styling the visited state with the support of the content property and the ::after pseudo element on a descendant element.

See the Pen Styling :visited – ::after solution by Adam Laki (@adamlaki) on CodePen.

Using CSS blend mode

I’m pretty sure that you know the Front-end Front a site where you can pick the hottest topics about the front-end development.
They apply a pretty sharp styling where they use CSS blend mode to fade the section’s image. Using this method they just change some background-color.

See the Pen Native :visited Link Styling with Image by Adam Laki (@adamlaki) on CodePen.

Use your border

Kenan Yusuf came up with a fascinating border solution. It has some pitfalls, and it is an experiment, but I’m sure you can learn a lot from that!

See the Pen Styling :visited – Border solution by Adam Laki (@adamlaki) on CodePen.

Using local storage

You can make a custom polyfill to make your personal visited formatting without the previously mentioned limits in styling. Of course, it has some drawbacks too like the users must have enabled JavaScript to make it work, and it’s mostly useful for your internal links.

You can build this script in many different ways but here is my example:

See the Pen Format Visited Link with The Use of Local Storage by Adam Laki (@adamlaki) on CodePen.

Joel Califa used a similar approach but in a different way, check it out!

SVG element

In the supported property list, you can find the fill and stroke property which are useful when you work with SVG. In the following example, you can see how you can modify an inline SVG stroke and fill values.

See the Pen Styling :visited – SVG solution by Adam Laki (@adamlaki) on CodePen.

Useful links