Animated Underline Hover Effect for Website Links

Store Design
1

Hi everyone :waving_hand:

I’m looking to add an animated underline effect to all hyperlinks on my website. Instead of the default fixed underline, I want a smooth animated line that appears on hover.

Reference example:
https://aibn.world/ (the underline animation used on links)

Screenshot 2025-12-31 164236
Screenshot 2025-12-31 1642361771×151 19.4 KB

My website has many hyperlinks across different sections, and the default static underline doesn’t look very appealing.

My website:
https://avyannadecore.com/
Password: nds

Screenshot 2025-12-31 164130
Screenshot 2025-12-31 1641301818×708 238 KB

If anyone knows how to achieve this (CSS or Shopify-specific solution), your help would be greatly appreciated.

Thanks in advance!

5

Hi, I just need all links on the website to show an underline animation only when the mouse is over them.

7

Hello @naveen.raj

Absolutely! You can achieve a smooth animated underline effect using CSS ::after pseudo-element and transitions. Here’s a clean and reusable approach for all tags:

/* Base link style */
a {
  position: relative;
  color: #007bff; /* change to your link color */
  text-decoration: none;
  transition: color 0.3s ease;
}

/* Create the animated underline using ::after */
a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px; /* thickness of the underline */
  background-color: #007bff; /* underline color */
  transition: width 0.3s ease;
}

/* Hover effect */
a:hover::after {
  width: 100%;
}

/* Optional: change link color on hover */
a:hover {
  color: #0056b3;
}

How it works:

  1. ::after creates a pseudo-element positioned at the bottom of the link.

  2. Its initial width is 0, so it’s invisible.

  3. On :hover, the width expands to 100% with a smooth transition.

  4. You can adjust height, background-color, and transition timing to suit your design.

Please hit Like and Mark it as a Solution if you find our reply helpful.