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

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

List of Anchor Pseudo Classes

  • :link - used to apply styles to non-visited links
  • :visited - used to apply styles to visited links
  • :hover - used to apply styles when mouse-cursor moves over the link
  • :active - used to apply styles to an active link. A link becomes active, when user clicks on it.

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

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="/css/index.htm">link</a></p>
    <p>This is another <a href="/index.htm">link</a></p>
    
</body>
</html>
Output

This is a link

This is another link

CSS Online Test


« Previous Tutorial Next Tutorial »



Like/Share Us on Facebook 😋