Changing Font Color of a Visited Link Using CSS

By default, web browsers change the color of visited links to help users distinguish between links they have clicked and those they haven’t. However, you can customize the font color of visited links using the CSS :visited pseudo-class. This is useful for maintaining design consistency and improving user experience on your website.

You can use the :visited pseudo-class to change the color of visited links (<a> tags) as shown in the following CSS code:

</>
Copy
/* Change color of visited links */
a:visited {
  color: purple;
}

Examples

Example 1. Changing Font Color of Visited Links

In this example, we change the font color of visited links to purple, while unvisited links remain blue.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    a {
      text-decoration: none;
      color: blue;
    }

    a:visited {
      color: purple;
    }
  </style>
</head>
<body>
  <p><a href="https://www.example.com">Click to Visit</a></p>
</body>
</html>

Output:

Example 2. Changing Font Color and Style of Visited Links

In this example, we not only change the font color of visited links but also modify the font style to italic.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    a {
      text-decoration: none;
      color: blue;
    }

    a:visited {
      color: darkred;
      font-style: italic;
    }
  </style>
</head>
<body>
  <p><a href="https://www.example.com">Click to Visit</a></p>
</body>
</html>

Example 3. Changing Visited Link Color for Specific Links

Sometimes, you may want to change the color of visited links only for a specific section of your website. You can achieve this by targeting links inside a specific class.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    a {
      text-decoration: none;
      color: blue;
    }

    .custom-links a:visited {
      color: green;
    }
  </style>
</head>
<body>
  <div class="custom-links">
    <p><a href="https://www.example.com">Visited Link in Custom Section</a></p>
  </div>

  <p><a href="https://www.example.com">Regular Visited Link</a></p>
</body>
</html>

Output:

Conclusion

Customizing the font color of visited links using the :visited pseudo-class is a simple but effective way to improve the user experience. You can apply different colors, font styles, or even animations to indicate that a link has been previously clicked.