Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Pseudo-Classes of Anchor Tag

  • Last Updated : 22 Oct, 2021

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.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

Syntax:

selector:pseudo-class { property: value; }

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



1. links: It represents a particular word or sentence as a link. It is of blue color which basically shows it is an unvisited link or the user has never clicked on that link.

2. 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.

3. 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.

4. Active: After clicking on the link, the link changes its state to an active state that represents the page linked to that link is loading. For a while, it remains active until the page is loaded completely.

The active state is shown with orange color. For example, let us understand this with an example.

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>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!