Styling Links with CSS: Hover, Visited, Focus and Active
CSS can style links in different states. The most useful pseudo-classes are :link, :visited, :hover, :focus-visible and :active.
Basic link-state CSS Top ↑
a:link { color: #b42318; }
a:visited { color: #5f3dc4; }
a:hover, a:focus-visible {
text-decoration: underline;
}
a:active { color: #0050b3; }Does pseudo-class order matter? Top ↑
When link-state selectors have equal specificity and set the same property, source order can matter because later rules win. The traditional link, visited, hover, active order is a useful mnemonic, but modern styles should also account for keyboard focus.
Privacy limits on :visited Top ↑
Browsers intentionally restrict which styles can reveal visited-link state. Treat :visited as a subtle visual cue, not as a way to inspect a user's browsing history.
Do not style hover without focus Top ↑
A mouse user can trigger :hover; a keyboard user needs a visible focus state. If you add a special hover treatment, provide an equally clear :focus or :focus-visible treatment.
Keep links recognizable Top ↑
Removing an underline can make links difficult to recognize, especially inside paragraphs. If you remove it, make sure another persistent cue distinguishes links from surrounding text.
Background hover example Top ↑
The next tutorial demonstrates changing both text and background on hover/focus.
Frequently Asked Questions Top ↑
What is :active?
It matches while an element is being activated, such as while a mouse button is pressed.
Should links always change on hover?
No, but the interaction state should remain understandable and accessible.
Can I remove link underlines?
Yes with CSS, but keep a clear non-color-only indication that the text is a link.
Why add :focus-visible?
It provides a visible cue for keyboard-style focus without forcing the same focus ring on every pointer click.
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
