CSS link decoration and states: preserve a visible navigation cue

When to use it

A payment history page contains case links inside ordinary paragraphs. Underline them at rest so they remain recognizable without hover or color discrimination. Give keyboard focus a separate outline and increase underline thickness on hover only as an enhancement. A visited color can help orientation, but browsers restrict what visited-state styling can reveal for privacy, so do not build behavior around detecting it. Buttons and links must retain their distinct jobs: a link navigates, a button acts. The sample scopes styles to the history region so global navigation components can have their own reviewed treatment. Check contrast on every background, especially when the same link appears inside a highlighted status card.

.payment-history a { color: #145078; text-decoration-line: underline; text-decoration-thickness: .08em; text-underline-offset: .18em; }
.payment-history a:hover { text-decoration-thickness: .14em; }
.payment-history a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

Cost and verification

Decoration changes are inexpensive to paint. The maintenance cost is visual consistency across ordinary, visited, hover, and focus states, each of which may be shown on several surfaces. Avoid removing the underline in a dense paragraph without an equally clear noncolor cue. A focus outline can be cut off by a clipped ancestor, so inspect the container too. The text-decoration shorthand can reset color, style, or thickness choices from other rules; longhands make the contract explicit here. Test keyboard focus before and after a long page scroll.

Common Mistakes

• Do not make a link visible only on hover.
• Do not rely on visited styling for application logic.
• Do not replace a navigation link with a button solely for styling.

Connected lessons

• CSS Property Decisions
• CSS pseudo-classes: style interaction states without hiding them
• CSS focus-visible: keep keyboard location unmistakable
• HTML link versus button: navigation and actions have different contracts

Further interaction details

• CSS text-decoration-skip-ink: keep underlined copy legible