Make Your Link Underlines Look Better: text-underline-offset

Back around 2016, if you wanted to add an underline to a hyperlink, you would typically add the text-decoration: underline property in CSS.

By default, the underline sits very close to the text. Some designers don’t like this look, and personally, I don’t think it looks very good either. Since you couldn’t adjust the position or thickness of underline, people usually resorted to using background-image instead.

With linear-gradient, we could simulate a line that looks like an underline. And since it was a background-image, we could directly use background-position to tweak its placement and background-size to adjust its thickness.

While this solved the problem of not being able to reposition the underline, in practice it felt rather cumbersome and somewhat deviated from the intended purpose of background-image. Of course, there was nothing wrong with using it—it just wasn’t very intuitive.

text-underline-offset

This CSS property was proposed a long time ago, but browser support was quite limited back then, which is why everyone kept using the background-image approach to adjust underline positions.

Nowadays, mainstream browsers all support this property, and the usage is very straightforward:

a {
  text-decoration: underline;
  text-underline-offset: 4px;
}

If you want finer control over the underline’s appearance, you can also pair it with text-decoration-thickness to adjust its weight:

a {
  text-decoration: underline;
  text-decoration-color: #3b82f6;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

Compared to the old background-image trick, this approach is far more semantic and much easier to maintain.

Seeing so many standards that started out as mere drafts finally implemented across browsers really gives you a sense that the web is moving forward.