Jump to content

How do I add an underline to hyperlinks on hover?

Recommended Posts

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

Please give this a 👍 if it helps

Link to comment
  • 4 weeks later...
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

Link to comment
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;
}

Please give this a 👍 if it helps

Link to comment
  • 9 months later...
  • 3 weeks later...

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

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 11 months later...

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;
}
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.