Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Anchor Pseudo-classes in CSS
Using CSS pseudo-class selectors, namely :active, :hover, :link and :visited we can style different states of a link/anchor. For proper functionality, the order of these selectors should be −
:link:visited:hover:active
Syntax
a:link {
/* styles for unvisited links */
}
a:visited {
/* styles for visited links */
}
a:hover {
/* styles when hovering over links */
}
a:active {
/* styles when clicking links */
}
Pseudo-class States
| Pseudo-class | Description |
|---|---|
:link |
Targets unvisited links |
:visited |
Targets visited links |
:hover |
Targets links when mouse hovers over them |
:active |
Targets links when being clicked |
Example 1: Basic Link States
Let's see an example to use CSS Anchor Pseudo Classes −
<!DOCTYPE html>
<html>
<head>
<style>
div {
text-align: center;
padding: 20px;
}
a {
margin: 20px;
padding: 10px;
border: 2px solid black;
text-decoration: none;
font-size: 1.1em;
display: inline-block;
}
a:link {
color: blue;
}
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>
<h2>Your favourite sports?</h2>
<a href="#football">Football</a>
<a href="#cricket">Cricket</a>
</div>
</body>
</html>
Two bordered links appear: "Football" and "Cricket" in blue color. When you hover over them, they turn orange, grow larger and show a gray shadow. When clicked, they turn red with an inset red shadow.
Example 2: Styled Navigation Links
Let's see another example with navigation-style links −
<!DOCTYPE html>
<html>
<head>
<style>
div {
color: #000;
padding: 20px;
background-image: linear-gradient(135deg, grey 0%, white 100%);
text-align: center;
}
.anchor {
margin: 10px;
padding: 10px 20px;
text-decoration: none;
border-radius: 5px;
display: inline-block;
transition: all 0.3s ease;
}
.anchor:link {
color: #FF8A00;
background-color: white;
}
.anchor:visited {
color: #FEDC11;
background-color: #f0f0f0;
}
.anchor:hover {
color: #C303C3;
background-color: #e0e0e0;
transform: translateY(-2px);
}
.anchor:active {
color: #4CAF50;
background-color: #d0d0d0;
transform: translateY(0);
}
</style>
</head>
<body>
<div>
<h1>Search Engines</h1>
<a class="anchor" href="https://www.google.com" target="_blank">Go To Google</a>
<a class="anchor" href="https://www.bing.com" target="_blank">Go To Bing</a>
</div>
</body>
</html>
A gradient background with "Search Engines" heading and two styled link buttons. Links change color and background on different states with smooth transitions. On hover, buttons lift slightly upward.
Conclusion
Anchor pseudo-classes are essential for creating interactive links. Remember the correct order (LVHA: Link, Visited, Hover, Active) to ensure proper functionality and smooth user experience.
Updated on: 2026-03-15T13:56:07+05:30
1K+ Views
Advertisements