CSS :visited

The CSS :visited pseudo-class applies styles to links (<a>) that the user has already visited. It is commonly used to visually distinguish visited links from unvisited ones, improving user experience and navigation clarity.

The syntax for the :visited pseudo-class is:

</>
Copy
selector:visited {
    property: value;
}

Where:

ParameterDescription
selectorThe link element (<a>) to which the visited style will be applied.
propertyThe CSS property to be changed when the link is visited.
valueThe value assigned to the CSS property for the visited state.

Examples

1. Changing Link Color for Visited Links

In this example, the color of visited links changes to purple.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        a:visited {
            color: purple;
        }
    </style>
</head>
<body>
    <a href="https://example.com">Visit this link</a>
</body>
</html>

2. Changing Font Style for Visited Links

Here, visited links are styled with italicized text.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        a:visited {
            font-style: italic;
        }
    </style>
</head>
<body>
    <a href="https://example.com">Visited link in italics</a>
</body>
</html>

3. Adding Underline to Visited Links

In this example, visited links are underlined to visually indicate they have been clicked.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        a:visited {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <a href="https://example.com">Underlined visited link</a>
</body>
</html>

4. Changing Background Color for Visited Links

This example demonstrates changing the background color of visited links to lightgray.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        a:visited {
            background-color: lightgray;
        }
    </style>
</head>
<body>
    <a href="https://example.com">Visited link with background color</a>
</body>
</html>

5. Customizing Font Size for Visited Links

Here, visited links have their font size increased for emphasis.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        a:visited {
            font-size: 1.2em;
        }
    </style>
</head>
<body>
    <a href="https://example.com">Visited link with larger font size</a>
</body>
</html>