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>
        a:link {text-decoration: none;}
        a:visited {color: red;}
        a:hover {text-decoration: underline; color: purple;}
        a:active {color: yellow;}

    <p>This is a <a href="/css/index.htm">link</a></p>
    <p>This is another <a href="/index.htm">link</a></p>

This is a link

This is another link

CSS Online Test

« Previous Tutorial Next Tutorial »

Follow/Like Us on Facebook

Subscribe Us on YouTube