Animated Underline Hover Effect for Website Links

Store Design

Topic summary

Goal: Add an animated underline that appears on hover for website links, similar to the effect on aibn.world. The requester shared their Shopify store URL and password, plus screenshots for context.

Proposed solution (CSS in Shopify):

  • Steps: Online Store > Themes > Edit code > theme.liquid, insert CSS before .
  • Technique: Target anchors with class a.menu-list__link; use a ::after pseudo-element positioned at the bottom. Animate the underline by transitioning its width from 0 to 100% on hover.
  • States: Keep underline always visible for active links via a .menu-list__link–active rule. Allow optional color customization (example uses #0066cc) for both active and hover states.

Scope and notes:

  • The provided CSS affects only links with the class menu-list__link (likely menu navigation), not all hyperlinks sitewide unless that class is applied more broadly.
  • Two screenshots were included; they support the visual goal but aren’t required to apply the fix.

Status: Awaiting confirmation from the requester; no verified resolution yet.

Summarized with AI on December 31. AI used: gpt-5.
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!

1 Like
5

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