Underline with offset

Inline paragraph with a single linked phrase—underline sits slightly below the baseline cluster for clearer descenders.

The archive now includes lichen surveys from 2019–2024—open data, no login required.

Widely Supported

typographyunderlineno-js

Quick implementation

a.soft-underline {
  text-decoration: underline;
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.22em;
  text-decoration-color: color-mix(in oklch, var(--accent) 70%, currentColor);
}
a.soft-underline:hover {
  text-decoration-thickness: 0.18em;
  text-underline-offset: 0.28em;
}

Prompt this to your LLM

Prose and wiki-style content.

You are styling default inline links in body copy.

Goal: Keep native underlines but add breathing room under letters.

Constraints:
- Use text-underline-offset and text-decoration-thickness (em units).
- Slightly increase both on :hover.
- Mix decoration color with accent + currentColor for theme fit.

Return CSS.

Why this matters in 2026

Browsers finally expose underline geometry; fewer brittle border-bottom tricks on wrapped lines.

The logic

Em-based thickness tracks font size; offset avoids colliding with g and y descenders.

Accessibility & performance

Don’t remove underlines from links in paragraphs; color alone is insufficient for WCAG.