How can I create gap between text & text-decoration underline?

Here I want 10px gap between text & underline. I can not use border-bottom; need to keep the underline part of the anchor tag for my project.

<a href="#" target="_blank" style="color:#000001; text-decoration:underline;">Link</a>

<a href="#" target="_blank" style="color:#000001; text-decoration:underline;">Link</a>

3 Replies

Unknown User•3y ago

Message Not Public

Jochem•3y ago

<a href="#" target="_blank" style="color:#000001; text-decoration:underline; text-underline-offset: 10px;">Link</a>

<a href="#" target="_blank" style="color:#000001; text-decoration:underline; text-underline-offset: 10px;">Link</a>

text-underline-offset increases the distance. You shouldn't use inline styles unless you don't have any other options though

Thanks!