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

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

Can you share link to page where you added code? We can check easier

9 hours ago, tuanphan said:

Can you share link to page where you added code? We can check easier

Hope this clarifies! Thank you.

https://www.leannelonglastname.com/hyperlink-example

On 4/26/2021 at 11:58 PM, leannevp said:

Hope this clarifies! Thank you.

https://www.leannelonglastname.com/hyperlink-example

Thank you. Can you share link to effect in screenshot? We can check their code

4 hours ago, tuanphan said:

Thank you. Can you share link to effect in screenshot? We can check their code

Sorry, I attached a screenshot but I'm not sure I understood what you meant. 

If it's helpful, here's proper access to my site:

https://www.leannelonglastname.com/travel

pw: Kilimanjaro21

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

 

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