CSS :visited Pseudo Class

CSS :visited Pseudo-Class

The :visited pseudo-class in CSS allows you to style links (<a> elements) after they have been visited by the user. It helps differentiate between visited and unvisited links on a webpage.

1. Syntax

a:visited {
  color: value;
}

2. Example – Change Link Color After Visit

a {
  color: blue; /* Default color for links */
}

a:visited {
  color: purple; /* Changes after visiting */
}

✅ The link turns purple after it has been clicked and visited.

3. What CSS Properties Can You Use with :visited?

For security reasons, only a few CSS properties can be applied to :visited:

✔ color
✔ background-color
✔ border-color
✔ outline-color
✔ column-rule-color
✔ text-decoration-color
✔ fill and stroke (for SVG elements)

❌ You CANNOT change display, visibility, content, position, or background-image.

4. Example – Styling Visited Links with Background Color

a:visited {
  color: gray;
  background-color: lightyellow;
}

✅ The link gets a gray font color and a light yellow background after visiting.

5. Resetting Visited Link Styles

If you want visited links to look the same as unvisited links, reset the styles:

a:visited {
  color: inherit;
}

✅ The link keeps its original color even after being visited.

6. Best Practices

✔ Use :visited to improve user experience by differentiating links.
✔ Avoid blending visited links with the background (e.g., white on white).
✔ Keep :visited styles subtle but noticeable for accessibility.