css button link help!

[emilyaugstudios]

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 –

[Tech_Coding]

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 </body> on theme.liquid
<style>
  .small-feature-link {
    text-decoration: unset !important;
  }
</style>

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

[BSSCommerce-HDL · 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 </head> 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  😍

[BSS-TekLabs]

- Here is the solution for you @emilyaugstudios 
- Please follow these steps:

- Then find the theme.liquid file.
- Then add the following code at the before tag </head> and press 'Save' to save it.

 

<style>
.small-feature-link::after {
    bottom: 3px !important;
}
</style>

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.