Hyperlinks: thick underline and highlight on hover

[krtyler05]

Hi All,

I was wondering if anyone was savvy enough with CSS to help me out. I’m trying to achieve the hyperlink effect shown on this site: https://www.marieforleo.com/2019/04/abby-wambach-wolfpack

The hyperlinks are underlined with a heavy line and highlight when hovered over. I’ll also need to be able to set the color for the line and highlight color.

Any suggestions are much appreciated!!!

Best,
Katie

[feelthefire]

I am no coder, but I right click on an element and use “inspect element” in my (firefox) browser to find out what CSS I need to change for something.

On THEIR site they use this for the underline:
.single .entry-content p a, .single .entry-content ul li a {
box-shadow: inset 0 -7px 0 0
#fcdedb;
}
and this for the hover over effect:
.single .entry-content p a:hover, .single .entry-content ul li a:hover {
background-color:
#fcdedb;
}
The CSS selectors before the { would have to be adjusted to where you need it in your own site. Play with it and I hope you can get it to work

x Marlies