How do I add an underline to hyperlinks on hover?

Hi,

I'd like to make all the links within my website show an underline when users hover over the link. I don't want an active underline - only when they hover. Does anyone know how to do this? thanks

4 hours ago, Charliehawkins said:

Hi,

 

I'd like to make all the links within my website show an underline when users hover over the link. I don't want an active underline - only when they hover. Does anyone know how to do this? thanks

Hi, add this code to custom css. Let me know how it goes 🙂 

h1 a, h2 a, h3 a, p a {
  text-decoration: none !important;
}

h1 a:hover, h2 a:hover, h3 a:hover, p a:hover {
  text-decoration:underline;
}

On 3/6/2022 at 8:47 PM, Jia said:

Hi, add this code to custom css. Let me know how it goes 🙂 

h1 a, h2 a, h3 a, p a {
  text-decoration: none !important;
}

h1 a:hover, h2 a:hover, h3 a:hover, p a:hover {
  text-decoration:underline;
}

Hi @Jia - I tried your code and while it removed the underline from links it doesn't have the underline when the mouse is hovered over the links. Do you have any suggestions?

website: www.dekanstudios.com/home

8 hours ago, abbyleebonny said:

Hi @Jia - I tried your code and while it removed the underline from links it doesn't have the underline when the mouse is hovered over the links. Do you have any suggestions?

 

website: www.dekanstudios.com/home

Let's try adding the !important tag, add this code:

a:hover {
  text-decoration:underline;
}

I had the same issue with the code. I added the a:hover and still nothing

On 1/19/2023 at 3:37 AM, tkk said:

I had the same issue with the code. I added the a:hover and still nothing

What is your site url? We can check code easier

Hi Guys!

I figured it out.

You have to add the !important to the hover line. Copy this code below and it will add the underline on hover.

h1 a, h2 a, h3 a, p a {
  text-decoration: none !important;
}

h1 a:hover, h2 a:hover, h3 a:hover, p a:hover {
  text-decoration:underline !important;
}

The only thing I want to figure out is how to make the underline thinner because doing this code makes the underline quite thick. If anyone has that code to add in lmk

On 2/9/2023 at 5:01 AM, Jenae said:

Hi Guys!

I figured it out.

You have to add the !important to the hover line. Copy this code below and it will add the underline on hover.

h1 a, h2 a, h3 a, p a {
  text-decoration: none !important;
}

h1 a:hover, h2 a:hover, h3 a:hover, p a:hover {
  text-decoration:underline !important;
}

 

The only thing I want to figure out is how to make the underline thinner because doing this code makes the underline quite thick. If anyone has that code to add in lmk

You can use this code

h1 a, h2 a, h3 a, p a {
  text-decoration: none !important;
}

h1 a:hover, h2 a:hover, h3 a:hover, p a:hover {
  border-bottom: 1px solid currentColor;
}

Use this code:

NOTE: Replace 'FONTSTYLE' with the block ID you you're looking to target 😀

//Underline on hover
FONTSTYLE a {
text-decoration: none !important;
}

FONTSTYLE a:hover {
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-decoration-color: #FFDA00 !important;
}