Use one base rule for CSS links, then add state selectors and decoration changes in a deliberate order. This CSS link underline approach keeps links recognizable while allowing hover, keyboard focus, and activation to provide distinct feedback.

The most reliable pattern preserves an underline by default, changes color for visited and interactive states, and uses a visible outline for keyboard focus.

Style CSS links by default with a working rule set

Start with the a selector so every link receives a consistent baseline. The :link selector then targets unvisited links, while :visited provides a separate history-based color.

a { color: #1455cc; text-decoration-line: underline; text-decoration-thickness: 0.12em; text-underline-offset: 0.18em; text-decoration-color: currentColor; }

a:link { color: #1455cc; }

a:visited { color: #6b3fa0; }

a:hover { color: #0b6b52; text-decoration-thickness: 0.16em; }

a:active { color: #a33a00; }

a:focus-visible { color: #1455cc; outline: 3px solid #b54708; outline-offset: 3px; text-decoration-thickness: 0.18em; }

These rules assume links have an href attribute. The base rule establishes the default appearance, and each later state can adjust only the properties needed for that interaction.

Apply CSS link states in the right order

CSS link states can overlap. A link may be visited and hovered at the same time, or focused and briefly active during keyboard activation. When selectors have equal specificity, the later declaration wins for the same property.

• :link styles an unvisited link.
• :visited styles a link whose destination appears in the browser’s history.
• :hover applies while a pointer rests over the link. It is not a dependable touch interaction.
• :active applies during the moment the link is being activated.
• :focus-visible applies when the browser determines that focus should be visibly indicated, especially for keyboard navigation.

Place the base a rule first, followed by :link, :visited, :hover, :active, and :focus-visible. Putting :focus-visible last lets the keyboard-focus treatment remain visible when another state also matches. This order is more important when several rules set the same color, underline thickness, or other property.

Customize a CSS link underline with text-decoration

A CSS link underline is controlled most precisely with separate text-decoration properties rather than a single shorthand declaration. The working rule uses these four controls:

• text-decoration-line: underline adds the line. Use none only when another strong link cue remains.
• text-decoration-thickness: 0.12em sets the line weight relative to the link’s font size.
• text-underline-offset: 0.18em creates space between the glyphs and the line, improving clarity.
• text-decoration-color: currentColor makes the underline follow the link’s current text color.

Use a separate decoration color when the design needs stronger contrast between text and underline. For example, text-decoration-color: #b54708 can make a CSS underline link more noticeable without changing its text color. Keep the underline on ordinary inline links; removing it everywhere makes links harder to distinguish from surrounding copy.

Keep underlines in CSS links distinct for hover and keyboard focus

Hover and keyboard focus serve different users, so do not treat them as interchangeable CSS link states. A thicker underline or color shift works well for pointer hover. Keyboard users need a persistent, high-contrast focus indicator that does not depend on pointer position.

Keep the default underline during focus and add an outline with outline and outline-offset. The outline sits outside the text and remains easy to see against varied backgrounds. Do not replace it with a subtle color change alone, and do not write outline: none without providing an equally clear alternative.

Because :focus-visible follows :active in the rule set, its outline and thickness remain available when a keyboard user activates the link. The result is a CSS underline link that stays recognizable at rest, responds clearly to hover, and preserves visible keyboard focus.