Add underline on hover for hyperlinks

[TownleyGrammar]

Dear X theme support, I wish to add a underline for text links when viewer hovers over link (word).

I added the custom CSS you reccommended from this topic:

Add underline to hyperlinks in para only

But it adds an underline that is permanenent, I want it to appear only when viewer scrolls over word as the code you kindly supplied me previously:

Underline effect on links not appearing?

Can you offer any advice, many thanks

Ashley

[thai]

@KingHenry

I want it to appear only when viewer scrolls over word as the code you kindly supplied me previously:

Hi There,

Would you mind providing us with the URL of that page and some screenshots?

Thank you.

[TownleyGrammar]

The Url of the page is:

http://kinghenry.org.uk/students/exams/

And screenshot is:

I would like the hyperlink marked in red to behalf the same way as the hyperlink marked in green

many thanks

Ashley

[rad]

Hi @KingHenry,

You mean make it underline upon hover and make it green as well? If yes, please change this custom CSS

a.underlined {
    text-decoration: underline !important;
}

to this

a.underlined:hover {
    text-decoration: underline !important;
   color: green !important;
}

Thanks!

[TownleyGrammar]

That is brilliant thank you so much, sorry I do have one last query to make:

The the hyperlinks links marked in the blue box (shown in the screenshot) what CSS wouild have to be applied for same effect?

[TownleyGrammar]

Sorry Rad, what would the CSS be to make the Green underline hide (disappear) on hover?

[rad]

Hi @KingHenry,

Ah, thanks for clarification, with that, you’ll need this CSS.

a.underlined {
    text-decoration: underline !important;
}
a.underlined:hover {
    text-decoration: none !important;
}

Thanks!

[TownleyGrammar]

kust what I wanted, Thank You.

[rad]

You’re welcome!