Refining Editorial Link Typography with CSS text-underline-offset

For years, designers avoided standard CSS text-decoration: underline because default browser underlines were clunky: they collided with font descenders ('g', 'y', 'p'), were too thick, and touched the text baseline. As a result, developers replaced underlines with border-bottom or box-shadow hacks that broke across wrapping lines.

Modern CSS provides granular typography control over link decoration through text-underline-offset, text-decoration-thickness, and text-decoration-skip-ink.

Example #

<p class="article-lead">
  Learn more about clean architecture in our
  <a href="/posts/css-grid-vs-flexbox-layout-patterns/">CSS layout guide</a>.
</p>

Implementation #

a {
  color: var(--blue);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  text-decoration-skip-ink: auto;
  transition: text-underline-offset 150ms ease, color 150ms ease;
}

a:hover {
  color: var(--primarydark);
  text-underline-offset: 6px;
}

Main Point: Use text-underline-offset and text-decoration-thickness for elegant editorial link underlines that gracefully skip descenders across line wraps.

Credits #

Photo by Aaron Burden on Unsplash

← Home