---
title: "Make links look like links · Agent Wranglers"
url: https://agentwranglers.se/playbook/website/accessibility/links-look-like-links
updated: 2026-10-20
licence: "All rights reserved"
---

# Make links look like links

By Erik Bergstedt, Agent Wranglers. Updated 2026-10-20.

- Level: Recommended
- Chapter: [Accessibility](https://agentwranglers.se/playbook/website/accessibility)
- Rule: 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".
- How: 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.
- Check: axe `link-in-text-block` passes. A search of the stylesheet finds `text-decoration: none` only on buttons and header navigation.

Example:

```css
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; }
```

**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`.

- Previous: [Say where each link goes](https://agentwranglers.se/playbook/website/accessibility/link-text)
- Next: [Never use colour as the only signal](https://agentwranglers.se/playbook/website/accessibility/not-color-alone)
- [Accessibility](https://agentwranglers.se/playbook/website/accessibility)