CSS Links
Links have four interactive states. Style them with pseudo-classes — in the right order — to communicate where the user is, where they've been, and where they're pointing.
The four states (LoVe HAte)
| State | Pseudo-class | Matches when… |
|---|---|---|
| Unvisited | :link | The user has not clicked this link before. |
| Visited | :visited | The browser has it in history. |
| Hover | :hover | The mouse is over it. |
| Active | :active | The link is being pressed. |
A complete link style
CSS
a:link { color: #2965F1; text-decoration: none; }
a:visited { color: #6f42c1; }
a:hover { color: #04AA6D; text-decoration: underline; }
a:active { color: #E44D26; }
a:focus-visible { outline: 2px solid #04AA6D; outline-offset: 2px; }
Note: Browsers limit which properties
:visited can change — colour and a few others, but not background. It's a privacy feature: it stops sites from snooping a user's history with CSS.Tip: Always include a
:focus-visible style. Keyboard users need to see the link they're on.Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Verdana, sans-serif; }
.box { background: #04AA6D; color: #fff; padding: 20px; border-radius: 6px; }
</style>
</head>
<body>
<h1>CSS Links</h1>
<div class="box">Edit the CSS on the left, then click Run »</div>
</body>
</html>
Try it Yourself »
Exercise
Remove the underline from unvisited links only.
a:
{ text-decoration: none; }
The pseudo-class for never-visited links.
Discussion
Loading…