Underline links

This is the effect I'm looking for: a little space between text and line and the line should disappear when I hoover over it.

Loom video: https://www.loom.com/share/3473e40cf2a846e8b4cb46d98e9dd4f3

Glad to hear that

Sorry, I justed edited my response above. I'm actually looking for a different effect :)

OK - so disable the underline option in the Customizer > General and add this CSS:

.entry-content p a:hover {
    text-decoration: underline;
}

Is there also a way to add a little more space between the link and the line? (see the example I provided above, gillandrews.com)

Try this CSS instead:

.entry-content p a {
    border-bottom: 1px solid transparent;
}

.entry-content p a:hover {
    border-bottom: 1px solid currentcolor;
}

Thanks David, this is working!

I would also like the same CSS to the links in the footer. How do I do this? Thanks :)

Can i see the site your adding this to ?

Sure, see private section.

Update the CSS to this:

.entry-content p a,
.site-footer a {
    border-bottom: 1px solid transparent;
}

.entry-content p a:hover,
.site-footer a:hover {
    border-bottom: 1px solid currentcolor;
}