Adding Spacing to an Underline Natively with CSS

In search of a way to add spacing between a link and its underline, I was going down the path of using a border-bottom which, despite being an easy and interesting solution, can lead to texts like this:

I could simply leave a standard text-decoration: underline, but that wouldn’t create the effect I wanted on my blog.

It turns out that since October 2021, the text-underline-offset property has been announced, which has been under development by the W3C team since 2019 if I’m not mistaken, and now supports most modern browsers:

According to Can I Use, basically all modern browsers are supported, except for Internet Explorer, as usual.

How to implement it?

Actually, it’s not very complicated. Just add it to the classes that already have text-decoration: underline as follows:

a {
	text-decoration: underline;
	text-decoration-style: dashed;
    text-underline-offset: 0.4rem; /* Percentages and Pixels are also accepted */
}
        

Without the text-underline-offset

With the text-underline-offset

The official Mozilla documentation also mentions that, like many other CSS properties, this one also accepts global values:

text-underline-offset: inherit;
text-underline-offset: initial;
text-underline-offset: revert;
text-underline-offset: unset;
text-underline-offset: auto;
        

Using a percentage as a value is also an interesting option, as it will seek the value of the font size as relative for its size to be calculated.

Besides, I don’t even need to say that it only works with text-decoration: underline, right?