Jump to content

Looking to replace hyperlink underlines with a colour highlight that changes with hover

Recommended Posts

I'm interested in making all of my Paragraph 2 hyperlinks show up as "low highlights" instead of underlines. I'd like them to showcase as one colour, and then change into another colour when hovered on top of.

So I found the code to do exactly what I'm looking for, using linear-gradients! (See below.) However, as seen in the image I uploaded, the highlight is quick thick. Ideally it would end at the same location as the underlines of hyperlinks normally are.

If anyone can help me out with this, I would really appreciate it.

---

Code I'm using:

p a {
 color: #000 !important;
 background: linear-gradient(180deg, rgba(255, 0, 0, 0) 50%, #F0ECE6 50%) !important;}

p a:hover {
 opacity: 1 !important;
  background: linear-gradient(180deg, rgba(255, 0, 0, 0) 50%, #E1B261 50%) !important;}

 

Screen Shot 2021-04-25 at 4.59.56 AM.png

Link to comment
  • Replies 5
  • Views 535
  • Created
  • Last Reply
On 4/25/2021 at 4:09 PM, leannevp said:

I'm interested in making all of my Paragraph 2 hyperlinks show up as "low highlights" instead of underlines. I'd like them to showcase as one colour, and then change into another colour when hovered on top of.

So I found the code to do exactly what I'm looking for, using linear-gradients! (See below.) However, as seen in the image I uploaded, the highlight is quick thick. Ideally it would end at the same location as the underlines of hyperlinks normally are.

If anyone can help me out with this, I would really appreciate it.

---

Code I'm using:

p a {
 color: #000 !important;
 background: linear-gradient(180deg, rgba(255, 0, 0, 0) 50%, #F0ECE6 50%) !important;}

p a:hover {
 opacity: 1 !important;
  background: linear-gradient(180deg, rgba(255, 0, 0, 0) 50%, #E1B261 50%) !important;}

 

Screen Shot 2021-04-25 at 4.59.56 AM.png

I mean can you share link to page where you see this effect? We can check their code

image.thumb.png.a9803401d645cb4fd6e3fa037a397fa8.png

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.