Here's a complete example of CSS code that styles all five link states with different colors and decorations:
p {
font-size: 2rem;
text-align: center;
}
a:link {
color: green;
}
a:visited {
color: olive;
}
a:focus {
background: orange;
}
a:hover {
background: yellow;
text-decoration: underline red wavy;
}
a:active {
background: red;
color: white;
}
font-size: 2rem;
text-align: center;
}
a:link {
color: green;
}
a:visited {
color: olive;
}
a:focus {
background: orange;
}
a:hover {
background: yellow;
text-decoration: underline red wavy;
}
a:active {
background: red;
color: white;
}
lightbulb
Order Matters!
Remember the order: LoVe Fears HAte
Link → Visited → Focus → Hover → Active
Link → Visited → Focus → Hover → Active
visibility
Live Demo
palette
Colors can be set with the
color property
format_underlined
Text decoration can be modified with
text-decoration
format_paint
Backgrounds can be added with
background property
border_style
Outlines help with accessibility for keyboard navigation