Link Colors
Give keyboard focus a visible outline without removing the underline.
Understand the topic
Links have states such as unvisited, visited, hovered, focused, and active. CSS pseudo-classes style these states. Preserve a visible indication that text is a link, usually an underline. A keyboard focus indicator is particularly important because keyboard users need to know which control will activate next. Visited styling is restricted by browsers for privacy.
Worked example
<style>
a { color: #1d4ed8; text-decoration: underline; }
a:visited { color: #7e22ce; }
a:hover { text-decoration-thickness: 3px; }
a:focus-visible { outline: 3px solid #15803d; outline-offset: 3px; }
</style>
<a href="#destination">Read the destination</a>
<h2 id="destination">Destination</h2>The link remains underlined and receives a clear outline when focused with the keyboard. Hover is an enhancement rather than the only feedback.
Practice
Give keyboard focus a visible outline without removing the underline.
Show a suggested answer
a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }Common mistake
Do not remove outlines unless you replace them with an equally visible focus indicator.