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

Around 2016, if you wanted to add an underline below a hyperlink, you would usually add the CSS property text-decoration: underline.

By default, underlines sit very close to the text, and some designers dislike this style. Personally, I don’t think it looks very good either. The position and thickness of underline can’t be adjusted, so in that situation people would usually use background-image instead.

By using linear-gradient, we can simulate a straight line similar to an underline. Since it’s a background-image, we can directly use background-position to adjust the position, and background-size to adjust the thickness.

Although this solves the problem of not being able to adjust the underline’s position, in actual use it can still feel a bit cumbersome, and it also seems somewhat to deviate from the original purpose of background-image. Of course, there’s absolutely nothing wrong with using it—it’s just not very intuitive.

text-underline-offset

This CSS property was proposed quite a long time ago, but browser support was very limited at the time, so people were still using background-image to adjust underline position.

Now mainstream browsers all support this property, and it’s very straightforward to use:

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

If you want more fine-grained control over the underline style, you can also combine it with text-decoration-thickness to adjust the thickness:

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

Compared with the old background-image approach, this is much clearer semantically and also easier to maintain.

Seeing standards that were originally just drafts being implemented one by one across different browsers really gives you the feeling that the times are moving forward.