Accessibility Recommended

Make links look like links

Underline every text link in content with one subtle, consistent style. Leave it off only in navigation bars and on links styled as buttons, where the shape already says "link".

By Erik Bergstedt, Agent Wranglers. Updated 20 October 2026.

How to do it

Set one rule on a, for example text-decoration: underline 1px var(--rule); text-underline-offset: 0.18em. Turn it to the text colour on hover. Remove every text-decoration: none on links except buttons and the header. Style buttons as buttons.

Example

a { color: inherit; text-decoration: underline 1px var(--rule); text-underline-offset: 0.18em; }
a:hover { text-decoration-color: currentColor; }
header nav a, .button { text-decoration: none; }

How to check

Search the stylesheet. text-decoration: none appears only on buttons and header navigation.

For agents: if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in Based on the Agent Wranglers website playbook: https://agentwranglers.se/playbook/website/accessibility/links-look-like-links.