CSS :link, :visited, :hover, :active

The CSS anchor pseudo-classes are used when we need to change the state of a link when a user interacts with it.

List of Anchor Pseudo Classes

CSS :link, :visited, :hover, :active Example

Consider the following code as an example demonstrating the anchor pseudo class in CSS:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
    <style>
        a:link {text-decoration: none;}
        a:visited {color: red;}
        a:hover {text-decoration: underline; color: purple;}
        a:active {color: yellow;}
    </style>
</head>
<body>

    <p>This is a <a href="#">link</a></p>
    <p>This is another <a href="#">link</a></p>
    
</body>
</html>
Output

This is a link

This is another link

Here is an explanation of all the anchor pseudo-classes used in the above example.

Before closing the discussion on anchor pseudo-classes in CSS, I'm willing to include one more example that might help you more with the topic.

HTML with JavaScript Code
<!DOCTYPE html>
<html>
<head>
   <style>
      /* Styling for regular (unvisited) links */
      a:link {
         color: #333;
         text-decoration: none;
         border-bottom: 1px solid #333;
      }
		
      /* Styling for visited links */
      a:visited {
         color: #999;
      }
		
      /* Styling for links when hovered over with the mouse */
      a:hover {
         color: #f00;
         border-color: #f00;
      }
		
      /* Styling for links that have been clicked on */
      a:active {
         color: #0f0;
         border-color: #0f0;
      }
   </style>
</head>
<body>

   <!-- Example links using the anchor pseudo-classes -->
   <p>Click <a href="#">here</a> to see a regular (unvisited) link.</p>
   <p>Click <a href="#">here</a> to see a visited link.</p>
   <p>Click <a href="#">here</a> to see a link when hovered over with the mouse.</p>
   <p>Click <a href="#">here</a> to see a link that has been clicked on.</p>
   
</body>
</html>
Output

Click here to see a regular (unvisited) link.

Click here to see a visited link.

Click here to see a link when hovered over with the mouse.

Click here to see a link that has been clicked on.

CSS Online Test


« Previous Tutorial Next Tutorial »


Liked this post? Share it!