Skip to content

Customizing visited links

New Courses Coming Soon

Join the waiting lists

I was considering adding some “special styling” to visited links, like this:

…when I remembered :visited links cannot use all CSS properties, just a few:

(source: MDN)

So I was searching and found this cool article that describes a technique that you can use to store in localstorage visited links, and then style as you want. This only applies to links visited after you implement the strategy, unfortunately.

But here’s an implementation - credits: using that article strategy - which I tried but then haven’t committed, so writing to not forget.

You save to local storage when someone visits a page:

    'visited-' + window.location.pathname,

Once the page that hosts the links loads (which might be different, for example a homepage or a blog posts list page), you add data-visited=true to all links visited:

    () => {
      const links =
      for (let i = 0; i < links.length; i++) {
        var link = links[i]
        if (
 == &&
            'visited-' + link.pathname
        ) {
          link.dataset.visited = true

Now you can style with any CSS property:

a[data-visited] {
  border-bottom: 1px dashed rgb(250, 204, 21);
a[data-visited]:after {
  content: ' ✔︎';
→ Get my CSS Handbook
→ Read my CSS Tutorial on The Valley of Code

Here is how can I help you: