CSS Styling Links
Links have four interactive states, and CSS lets you style each one to guide and reassure the reader.
An anchor (<a>) element can be in several states depending on what the visitor is doing, and CSS gives you a pseudo-class for each. Styling these states makes navigation feel responsive and tells people where they are and where they have already been.
The four link states
Styling every state
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
color: #00643c;
}
a:visited {
color: #6b4f9e;
}
a:hover {
color: #008f56;
text-decoration: underline;
}
a:active {
color: #d64545;
}
</style>
</head>
<body>
<p>
<a href="#home">Home</a>
<a href="#about">About</a>
</p>
</body>
</html>Note: Order matters. Write the rules as link, visited, hover, active. If hover comes before visited, the hover color may never show because of how specificity and source order interact.
Removing the default underline
Browsers underline links by default. You can turn that off with <text-decoration> and bring it back on hover, which keeps menus clean while still signalling interactivity. See CSS Text Decoration for more on this property.
Underline only on hover
<!DOCTYPE html>
<html>
<head>
<style>
nav a {
text-decoration: none;
color: #333;
}
nav a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<nav>
<a href="#home">Home</a>
<a href="#services">Services</a>
<a href="#contact">Contact</a>
</nav>
</body>
</html>Note: Keep visited links visually distinct from unvisited ones. It is a small touch that helps people avoid re-reading pages they have already seen.
