Control underline position on text-decoration: underline

2020

Use text-underline-offset!

2012

The only way to do that is to use a border instead of an underline. Underlines are notoriously inflexible.

a {
    border-bottom: 1px solid currentColor; /* Or whatever color you want */
    text-decoration: none;
}

Here’s a demo. If that’s not enough space, you can easily add more — if it’s too much, that’s a little less convenient.