css button link help!

Hi everyone, I have added the code below to my website to add a red underline ease-in on hover for link buttons (you can see this feature work on all links within the site), and I love it! However, on the product page just for the pop out ‘THE SIZE GUIDE’ button/link the line doesn’t sit right, instead appearing underneath the link line (images added below).

If anyone has any help on what I might be doing wrong or advise on how to target this specific link that would be greatly appreciated!

URL – https://pantee.co.uk/?_ab=0&_fd=0&_sc=1&preview_theme_id=144118972631

.small-feature-link {
position: relative;
}

.small-feature-link::after {
content: “”;
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 1px;
background-color: #c90013;
transition: width 0.5s linear;
}

.small-feature-link:hover::after {
width: 100%;
}

What it’s doing –

What it should look like –

Screenshot 2024-09-12 at 15.05.29.png

Hello @emilyaugstudios

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.small-feature-link { text-decoration: unset !important; }

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

Hi @emilyaugstudios ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag

.js-product.product-info .small-feature-link::after {
    bottom: 5px !important;
}

Here is result:
Before hover:

After hover:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

  • Then find the theme.liquid file.
  • Then add the following code at the before tag and press ‘Save’ to save it.

  • Here is the result you will achieve:

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.