Styling different states of a link using CSS


Using CSS pseudo selectors, namely, :active, :hover, :link and :visited, we can style different states of a link. For proper functionality, the order of these selectors is given by:- :link, :visited, :hover, :active.

Syntax

The syntax of CSS text-indent property is as follows −

a:(pseudo-selector) {
   /*declarations*/
}

The following are some key Pseudo-classes for links −

  • :active = To select the active link

  • :hover = To select links on mouse over

  • :hover = To select links on mouse over

  • :valid = To select elements with a valid value

  • :visited = To select all visited links

The following examples illustrate the styling of different states of a link −

Set the states of a link

The different states of a link are set here using the pseudo classes −

a:link {
   color: navy;
   text-decoration: none;
}
a:visited {
   color: yellowgreen;
}
a:hover {
   color: orange;
   text-decoration: wavy underline;
}
a:active {
   color: red;
}

Example

Let us see the example −

<!DOCTYPE html>
<html>
<head>
   <style>
      div {
         margin-left: 20px;
         display: flex;
         float: left;
      }
      a:link {
         color: navy;
         text-decoration: none;
      }
      a:visited {
         color: yellowgreen;
      }
      a:hover {
         color: orange;
         text-decoration: wavy underline;
      }
      a:active {
         color: red;
      }
   </style>
</head>
<body>
   <div>
      <div>
         <a href="#">Demo link </a>
      </div>
      <div>
         <a href="">Demo visited link</a>
      </div>
   </div>
</body>
</html>

Set the states of a link and change the shadow

The link states are used to change the element’s shadow on an active link and when it is hovered −

a:hover {
   color: orange;
   font-size: 150%;
   font-weight: bold;
   box-shadow: 0 0 5px 1px grey;
}
a:active {
   color: red;
   box-shadow: inset 0 0 15px red;
}

Example

Let us see the example −

<!DOCTYPE html>
<html>
<head>
   <style>
      div {
         display: flex;
         float: left;
      }
      a {
         margin: 20px;
         padding: 10px;
         border: 2px solid black;
         text-shadow: -1px 0px black, 0px -1px black, 0px 1px black, 1px 0px black;
         font-size: 1.1em;
      }
      a:link {
         text-decoration: none;
      }
      a:visited {
         color: blueviolet;
      }
      a:hover {
         color: orange;
         font-size: 150%;
         font-weight: bold;
         box-shadow: 0 0 5px 1px grey;
      }
      a:active {
         color: red;
         box-shadow: inset 0 0 15px red;
      }
   </style>
</head>
<body>
   <div>
      <a href="#">Kapow!</a>
      <a href="">Dishoom</a>
   </div>
</body>
</html>

Updated on: 27-Dec-2023

134 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements