Styling different states of a link using CSS

CSS Web Development Front End Technology

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*/
}

Example

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

Live Demo

<!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>

Output

This gives the following output −

On hovering the first link, we get the following output −

While clicking the second link, we get the following output −

Example

Live Demo

<!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>