How to animate underline in every linkable text (main menu, products cards etc)

[Sougias]

Hello Shopify community,

First of all thank you for your time. I was wandering how am I able to create an underline animation effect in every linkable text in my shop. There has been a similar question a year ago but the solution isn't there. I want it to look like this (look at the header). I am using Dawn theme and my store is tondion.com.

All possible solution are welcome,

Thanks again

[BSS-TekLabs]

Hello @Sougias 
Our team is ready to help you.
Please share your website URL so that we can check and assist you.

[Sougias]

This is it

[TheUntechnickle]

Hey @Sougias,

You can achieve the animated underline effect for your linkable text (like in the header and product cards) using some CSS magic! Here’s the solution that should work for your Dawn theme:

/* Add this to your existing CSS */
.header__menu-item,
.list-menu__item {
  position: relative;
  text-decoration: none !important; /* Hide the old underline */
}

.header__menu-item::after,
.list-menu__item::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -2px;
  left: 0;
  background-color: currentColor;
  transition: width 0.3s ease-in-out;
}

.header__menu-item:hover::after,
.list-menu__item:hover::after {
  width: 100%;
}

/* Remove the reverse animation for simplicity and smoothness */

/* Ensure the underline doesn't appear for dropdown arrows */
summary.list-menu__item::after {
  display: none;
}

/* Adjust for active/current page if needed */
.header__active-menu-item::after {
  width: 100%;
}

/* Optional: Adjust underline position if needed */
@media (min-width: 990px) {
  .header__menu-item::after,
  .list-menu__item::after {
    bottom: 0.8rem; /* Adjust this value as needed */
  }
}

To implement this:

1. Go to Online Store > Themes in your Shopify admin.
2. Click Actions > Edit code on your active theme (Dawn).
3. Locate your theme's CSS file (usually under Assets, named something like base.css or theme.css).
4. Add this CSS code at the bottom of the file and save.

This will give your linkable texts a smooth, animated underline effect on hover, similar to what you’re looking for in your header.

Let me know if this works or if you need further assistance!

Cheers,
Shubham | Untechnickle

[Sougias]

No, unfortunately, it doesn't work. Can we make any differences?

[TheUntechnickle]

/* Navigation Underline Animation */
.header__menu-item,
.list-menu__item {
  position: relative !important;
  text-decoration: none !important;
}

.header__menu-item::after,
.list-menu__item::after {
  content: '' !important;
  position: absolute !important;
  width: 0 !important;
  height: 1px !important;
  bottom: 10px !important;
  left: 0 !important;
  background-color: currentColor !important;
  transition: width 0.3s ease-in-out !important;
}

.header__menu-item:hover::after,
.list-menu__item:hover::after {
  width: 100% !important;
}

/* Override old underline */
.header__menu-item:hover span,
.list-menu__item:hover span {
  text-decoration: none !important;
}

/* Ensure the underline doesn't appear for dropdown arrows */
summary.list-menu__item::after {
  display: none !important;
}

/* Adjust for active/current page if needed */
.header__active-menu-item::after {
  width: 100% !important;
}

/* Maintain consistent underline position for larger screens */
@media (min-width: 990px) {
  .header__menu-item::after,
  .list-menu__item::after {
    bottom: 10px !important;
  }
}

My bad. This should work 🙂

[Sougias]

Nothing again. Followed the steps and placed it in bace.css but it doesn't seem to want to work