Pseudo-class :visited

The pseudo-class :visited is used to style links that have been visited by the user. For security reasons, styling options are limited mainly to colors.

EXAMPLE

<!DOCTYPE html>
<html lang="en">
<head>
<script src="examples/css/visited.js" defer></script>
<style>
    .links-container {
        max-width: 600px;
        margin: 20px auto;
        padding: 20px;
        border-radius: 8px;
    }
    
    .nav-links a {
        display: block;
        padding: 10px 15px;
        margin: 5px 0;
        text-decoration: none;
        border-radius: 4px;
        transition: all 0.3s ease;
        position: relative;
    }
    
    .nav-links a span {
        color: #0f172a!important;
    }
    
    /* Unvisited links */
    .nav-links a:link {
        color: #2196F3!important;
        background-color: white!important;
    }
    
    /* Visited links */
    .nav-links a:visited {
        color: #673AB7!important;
        background-color: #f3e5f5!important;
    }
    
    /* Hover state */
    .nav-links a:hover {
        transform: translateX(10px);
        box-shadow: 0 2px 5px rgba(0,0,0,0.1)!important;
    }
    
    /* Active state (when clicking) */
    .nav-links a:active {
        transform: translateX(5px);
        opacity: 0.8;
    }
    
    .status-indicator {
        font-size: 0.8em;
        margin-left: 10px;
        opacity: 0.7;
    }
    
    .note {
        font-size: 0.9em;
        margin-top: 20px;
        padding: 10px;
        border-left: 3px solid #2196F3!important;
        background-color: white!important;
    }
    .note p {
        color: #0f172a!important;
    }
    .note p strong {
        color: #0f172a!important;
    }
</style>
</head>
<body>
    <div class="links-container">
        <h3>Links List</h3>
        <div class="nav-links">
            <a href="#first-link">First Link
                <span class="status-indicator">(changes color after visit)</span>
            </a>
            <a href="#second-link">Second Link
                <span class="status-indicator">(changes color after visit)</span>
            </a>
            <a href="#third-link">Third Link
                <span class="status-indicator">(changes color after visit)</span>
            </a>
            <a href="#fourth-link">Fourth Link
                <span class="status-indicator">(changes color after visit)</span>
            </a>
        </div>
        
        <div class="note">
            <p><strong>Note:</strong> For security reasons, only certain CSS properties can be modified with the :visited 
            pseudo-class, primarily colors.</p>
        </div>
    </div>
</body>
</html>

RESULT