[Support request] Underline links

[Renske]

Hi there,

How do I underline my links? (just the links in the main text, not the links in button blocks, navigation etc). Thanks!

[Renske]

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

[David]

Glad to hear that

[Renske]

Sorry, I justed edited my response above. I’m actually looking for a different effect 🙂

[David]

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

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

[Renske]

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)

[David]

Try this CSS instead:

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

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

[Renske]

Thanks David, this is working!

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

[David]

Can i see the site your adding this to ?

[Renske]

Sure, see private section.

[David]

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;
}

[Author]

Posts