CSS: How to put a checkmark icon/acsii character next to all visited links?

Question

For any visited (a:visited) web page, I would like to display those links on my website with a small checkmark to the left of the link.

So for example:

"this is an unvisited link"

√ "this is a visited link"

Question: how do I accomplish the checkmark using CSS?

Answer 1

You could use :before pseudo selector, but it's not well supported.

For better support, make it an image, and set it to background-image. Then use padding to show the image.

Answer 2

You can use a combination of background and padding to get this effect.

a:visited {
    background: transparent url("path/to/checkmark.png") left center no-repeat;
    padding-left: 10px;
}

Adjust the padding, and background position to fit your needs. Hope this helps.

Answer 3

a:visited:before {
    content: "\00A0\221A";
}

source