How can I underline and bold links within content on Hover?

Hi there

which links do you want to change?
Just those in the main content area?

Yes, in the content area of page and post. You can find the links here in blue color - https://www.friedcoffee.com/best-drip-coffee-maker-picks/.
On Hover, I want these to change to
- Bold
- Underlined

Try this CSS:

body:not(.blog):not(.archive) .inside-article a:hover {
    font-weight: bold;
    text-decoration: underline;
}

That works fine David!
Thanks

You're welcome

How can I increase the width of underline used in text decoration and also the color.

In your current CSS remove the text-decoration property as you can't style these. And then add this CSS:

body:not(.blog):not(.archive) .inside-article a {
    position: relative;
}

body:not(.blog):not(.archive) .inside-article a:after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    border-bottom: 3px solid transparent; /* Change weight of underline */
    pointer-events: none;
}

body:not(.blog):not(.archive) .inside-article a:hover:after {
    border-bottom-color: green; /* Change color for hover state */
}

The underline is coming up in a strange way. Check this page - https://www.friedcoffee.com/test/
Even images with links are getting underlined.

Have you fixed this?

I'm not seeing underline on the image links.

Yes, I didn't wanted extra load of custom CSS, so adjusted things with previous code only! Thanks anyways...

Awesome :)