CSS Tips: Customizing visited links

Join the AI Workshop to learn more about AI and how it can be applied to web development. Next cohort February 1st, 2026

The AI-first Web Development BOOTCAMP cohort starts February 24th, 2026. 10 weeks of intensive training and hands-on projects.


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:

<script>
  localStorage.setItem(
    'visited-' + window.location.pathname,
    true
  )
</script>

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:

<script>
  window.addEventListener(
    'DOMContentLoaded',
    () => {
      const links =
        document.getElementsByTagName('a')
      for (let i = 0; i < links.length; i++) {
        var link = links[i]
        if (
          link.host == window.location.host &&
          localStorage.getItem(
            'visited-' + link.pathname
          )
        ) {
          link.dataset.visited = true
        }
      }
    }
  )
</script>

Now you can style with any CSS property:

a[data-visited] {
  border-bottom: 1px dashed rgb(250, 204, 21);
}
a[data-visited]:after {
  content: ' ✔︎';
}

Lessons in this unit:

0: Introduction
1: How to center an element with CSS
2: CSS Border inside the element
3: What are good CSS Breakpoint values for Responsive Design?
4: How to debug CSS by bisecting
5: How to disable text selection using CSS
6: How to put an item at the bottom of its container using CSS
7: CSS, how to select elements that do NOT have a class
8: How to stick an element on the bottom of the page with flexbox
9: How to apply padding to multiple lines in CSS
10: Making a table responsive using CSS
11: CSS url()
12: How to make an element smaller or bigger with CSS
13: ▶︎ Customizing visited links
14: Fix extra space after inline element
15: How to create a sidebar that’s sticky but also scrolls
16: How to embed YouTube videos using the correct aspect ratio
17: Responsive pre tags in CSS
18: Responsive YouTube Video Embeds
19: How to remove all CSS from a page at once
20: How I added Dark Mode to my website
21: How to add a simple dark mode