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

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

This is a link

This is another link

CSS Online Test


« Previous Tutorial Next Tutorial »