How to Add Hover Effect to all Clickable text - Fashionopolism Theme

I am trying to assist one of our clients who wants to add a hover effect as well as removing a current effect on all their text links. Currently there is no hover effect and when the link is clicked a box shows up like so:

They would like to add an effect similar to https://www.tiffany.com/ where the line appears when hovering over any text links. They would like the color of the line to be red which is within their branding.

Any assistance would be greatly appreciated.

Here is a link to their current website: https://arthurgroom.com/

Thank you

Hello @35 ,

Check this example.

Thanks

Hi

Thank you for this example where would I input this string of code?

@35 , Follow these steps:

  1. Go to Online Store → Theme → Edit code

  2. Open your stylesheet.css file and paste the following code below:

.prod-title.h4:focus {
    outline: 0 !important;
}
.prod-title.h4:after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    display: block; 
    right: 0;
    left: 0;
    background: #b7010e;
    transition: width .4s ease !important;
    -webkit-transition: width .4s ease !important;
}
.prod-title.h4:hover:after{
  width: 100%;
  left: 0;
  background: #b7010e;
}

@Guleria

Thank you for your response this worked for the body of the website is there a way to add this to the title and header?

Thank you