CSS Links

CSS Links: Interactive States, Underlines, and LVHA Order

CSS lets you style anchor (a) links cleanly across unvisited, visited, hovered, keyboard-focused, and clicked states. Preserving clear interactive feedback and accessible underlines makes navigation intuitive on both mouse desktops and touch screens.

The Four Link States and Cascade Order

Link pseudo-classes share equal specificity, so their order in the stylesheet matters. Follow the LVHA order (:link -> :visited -> :hover -> :active), placing :focus-visible right alongside :hover:

1. :link: Matches unvisited links with an href.
2. :visited: Styles pages already in the user's browser history (browsers restrict :visited to color properties for privacy).
3. :hover and :focus-visible: Highlights the link under the pointer or keyboard focus ring.
4. :active: Applies briefly during the click press.

.prose-link:link {
    color: #2563eb;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.prose-link:visited {
    color: #6d28d9;
}

.prose-link:hover,
.prose-link:focus-visible {
    color: #1d4ed8;
    text-decoration-thickness: 2px;
}

.prose-link:active {
    color: #1e3a8a;
}

Styling Button-Like Links

For call-to-action links styled as buttons (display: inline-block; padding: 10px 18px;), removing the underline with text-decoration: none; is fine because the button shape, background fill, and border signal clickability visually. Inside body paragraphs, always keep underlines visible.

Common Mistakes to Avoid

• Putting :hover before :visited in your CSS: If :visited comes after :hover, visited links stop changing color on mouseover.
• Removing :focus outlines on navigation links: Keyboard visitors need a visible :focus-visible indicator while tabbing through menus.
• Animating layout properties on :hover: Avoid changing font-weight on hover, which widens text and shifts adjacent links sideways.

Frequently Asked Questions

Why won't background-image or padding change on a:visited?

For user privacy, browsers block scripts and CSS from probing history via :visited layout shifts, allowing only color changes (color, background-color, border-color).

How do I make the underline sit slightly below letters?

Use text-underline-offset: 3px; and text-decoration-thickness: 2px; for clean spacing below descenders like g and y.