Pseudo-Classes of Anchor Tag

Last Updated : 15 May, 2023

Pseudo-classes is a way to describe the state of the link or it gives effect to the anchor tag <a>. A user can show a link whether it has been visited by them previously or it is in a running state,

We can also change the cursor sign when the mouse is over it. It has the following syntax.

Syntax:

selector:pseudo-class { property: value; }

There are basically four styles that represent the state of the link.

links: These represent a particular word or sentence as a link. It is blue in color which basically shows it is an unvisited link or the user has never clicked on that link.
Visited link: This shows that the particular link has been visited by the user earlier. In this example, the visited link has been shown with the color red.
hover: When the mouse is over the link. It helps to grab the attention of the reader in the link. It has been shown with green color. When the mouse is over the link, the color of the link will change to green color.
Active: After clicking on the link, the link changes its state to an active state that represents the page linked to that link loading. For a while, it remains active until the page is loaded completely.

Example: In this example, we see the use of pseudo-classes.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Pseudo-Classes</title>
    <style>
        a:link {
            color: blue;
        }
 
        a:visited {
            color: red;
        }
 
        a:hover {
            color: green;
        }
 
        a:active {
            color: orange;
        }
    </style>
</head>
<body>
    <h2>Welcome To GFG</h2>
    <p><a href="https://www.geeksforgeeks.org">
            Click on this link to see the effects.
        </a>
    </p>
</body>
</html>