Put Checkmarks Next To Visited Links With Pure CSS

Understanding the :visited Pseudo-Class

The :visited pseudo-class applies styles to links that the user has already visited. Browsers maintain a history of visited URLs to enable this functionality, though users can clear this history at any time. This pseudo-class has been part of CSS since the earliest specifications and remains a useful tool for creating intuitive navigation experiences.

Privacy Restrictions

Modern browsers have implemented strict privacy limitations on what styles can be applied to visited links. These restrictions exist to prevent malicious websites from detecting a user's browsing history by testing which links would appear styled. Only a limited set of color-related CSS properties can be modified when using :visited, including color, background-color, border colors, outline-color, column-rule-color, text-decoration-color, and text-emphasis-color.

The alpha component (transparency) of these styles is ignored, which means you cannot use semi-transparent colors to detect visited links. Additionally, getComputedStyle() will always return the non-visited color values for security reasons, preventing scripts from detecting which links a user has visited. These protections ensure that websites cannot build profiles of your browsing history based on link styling.

Method 1: Using Pseudo-Elements with Unicode

CSS pseudo-elements allow you to insert content before or after an element using the content property. Combined with the :visited pseudo-class, this enables adding checkmark characters to visited links without modifying any HTML. The ::before pseudo-element creates content immediately before the link text, while ::after adds content after it.

The Basic Technique

The unicode character for a check mark is 2713. In CSS, you specify unicode characters using a backslash followed by the hexadecimal code. For a check mark followed by a space, you write content: "\2713\00A0". The non-breaking space (00A0) prevents the check mark from sitting too close to the link text, creating clean visual separation. This method works in all modern browsers including Chrome, Firefox, Safari, and Edge.

a:visited::before {
 content: "\2713\00A0";
 color: #228B22;
}

Font Compatibility Considerations

While the check mark unicode character (2713) works reliably on modern Mac browsers and has improved on Windows, some users may see different symbols depending on their installed fonts and operating system. The appearance can vary between systems due to font fallback differences. If you encounter rendering issues, the square root symbol (221A) serves as an alternative that displays consistently across more systems.

a:visited::before {
 content: "\221A\00A0";
 font-family: "Wingdings", sans-serif;
}

For most projects, the standard unicode check mark works well and provides a lightweight solution without requiring additional image assets. Use the alternative approach if you need consistent rendering across older systems or specific corporate environments with limited font support. When implementing advanced CSS techniques like these, working with a professional web development team ensures cross-browser compatibility and optimal user experience.

Method 2: Background Image Approach

The background image method provides the most consistent cross-browser experience for visited link styling. By applying a small checkmark image as a background to visited links, you ensure identical appearance regardless of font or browser differences. This approach gives you complete control over the checkmark's appearance, including color, size, and positioning.

SVG images are recommended for their scalability and small file size, ensuring crisp edges at any resolution. The image appears to the left of the link text, with the padding ensuring adequate spacing between the checkmark and the link text.

a:visited {
 padding-left: 20px;
 background: url('/images/checkmark.svg') left center no-repeat;
 background-size: 16px 16px;
}

Practical Implementation Guidelines

When to Use Visited Link Styling

Adding visual indicators to visited links works best in specific contexts. Content-heavy sites with many internal links benefit most, as users can easily track their reading progress and identify which articles they have already explored. Article pages, documentation sites, and resource libraries are ideal candidates for this technique. Educational platforms with sequential learning paths also see significant value in helping students understand where they left off.

However, navigation menus and primary site navigation typically don't need this treatment. Frequent page visits would quickly fill navigation elements with checkmarks, creating visual noise in frequently-used interface elements. Keep this styling focused on content discovery areas rather than utility navigation.

Selective Application with CSS Selectors

Rather than applying checkmarks to all visited links, use specific selectors to target only relevant areas. This keeps the visual effect purposeful and prevents clutter throughout your site. Common approaches include targeting links within article content using classes like .article-content or [role="article"], or specific container elements that hold lists of links.

/* Only apply to links in article content */
.article-content a:visited::before {
 content: "\2713\00A0";
}

/* Exclude navigation links */
nav a:visited::before {
 content: none;
}

By scoping your CSS carefully, you ensure the visited link indicator appears only where it provides genuine value to users navigating your content. These CSS techniques contribute to better site usability and can positively impact your search engine rankings by reducing bounce rates and encouraging deeper site exploration.

Summary

Putting checkmarks next to visited links with pure CSS is achievable through two primary methods:

1. Unicode characters with pseudo-elements - A simpler implementation that works in modern browsers without requiring additional assets
2. Background images - Maximum compatibility and complete visual control, ideal for projects requiring consistent branding

Modern privacy restrictions limit which CSS properties can be modified with :visited, but color-based styling and pseudo-element content remain fully supported. Following the LVHA ordering ensures proper cascade behavior across all link states.

This technique enhances user navigation experience on content-heavy sites without requiring JavaScript or server-side processing. By selectively applying visited link styling to appropriate areas of your site, you help users track their content exploration efficiently while maintaining a clean, professional interface.

Sources

1. CSS-Tricks: "Checkmark" Your Visited Links with Pure CSS - The definitive guide covering pseudo-element and background image approaches
2. MDN Web Docs: :visited Selector - Official documentation on privacy restrictions and allowed properties
3. 456 Berea Street: Check Marking Visited Links - Early exploration of CSS generated content with pseudo-elements