Skip to content
Related Articles
Open in App
Not now

Related Articles

Pseudo-Classes of Anchor Tag

Improve Article
Save Article
  • Difficulty Level : Medium
  • Last Updated : 22 Oct, 2021
Improve Article
Save Article

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.


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.


<!DOCTYPE html>
        a:link {
            color: blue;
        a:visited {
            color: red;
        a:hover {
            color: green;
        a:active {
            color: orange;
    <h2>Welcome To GFG</h2>
    <p><a href="">
            Click on this link to see the effects.


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!