TIL about the CSS property text-underline-position. This property is a useful progressive enhancement to achieve a particular look and feel for links, in particular for content with many descenders.


This is standard underlined text.

This text has the underline position set to "under".

This text has a bottom border instead of an underline. Notice that the border overflows the text and doesn't work for multiline.

Browser support is not so good for this feature, it being fully supported only in Chrome and Edge on desktop, and Edge on mobile, so it is important to consider this a progressive enhancement. A similar effect can be achived with a CSS bottom border, however this can make alignment of “underlined” and non-underlined text difficult.