How to animate the underline hover effect in .header__menu-item?

Store Design
,

Topic summary

A user seeks help implementing an animated underline hover effect for menu items in a Shopify theme header. They want the underline to animate from left to right on hover.

Attempted Solution:

  • Tried CSS code from 30secondsofcode.org targeting .header__menu-item span
  • Used ::after pseudo-element with transform: scaleX() and transform-origin properties
  • Code placed at bottom of base.css file but not functioning as expected

Response Provided:
Another user shared a working example using similar CSS approach:

  • Applies display: inline-block and position: relative to main element
  • Uses ::after pseudo-element with 2px height, positioned absolutely
  • Animates with transform: scaleX(0) to scaleX(1) on hover
  • Includes transform-origin shift from bottom right to bottom left
  • Adds 0.25s ease-out transition

Status: Discussion remains open; unclear if the suggested solution resolved the original issue.

Summarized with AI on November 21. AI used: claude-sonnet-4-5-20250929.
1

The effect should be like this:

hover-effect-one.gif

Store URL: https://thelikhastudio.com/

2

I tried this code already which I found in https://www.30secondsofcode.org/css/s/hover-underline-animation/
But it’s not working. I also changed it to this:

.

.header__menu-item:hover span{
	text-decoration: none !important;
}

.header__menu-item span{
  display: inline-block;
  position: relative;
}

.header__menu-item span::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #fff;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.header__menu-item span:hover::after {
  text-decoration: none !important;
  transform: scaleX(1);
  transform-origin: bottom left;
}

I put it on the bottom of base.csss and still not working. Any ideas?

3

Hi @Likha

You can implement below example

Text to see the effect!

.hover-underline-animation { display: inline-block; position: relative; color: #0087ca; } .hover-underline-animation:after { content: ''; position: absolute; width: 100%; transform: scaleX(0); height: 2px; bottom: 0; left: 0; background-color: #0087ca; transform-origin: bottom right; transition: transform 0.25s ease-out; } .hover-underline-animation:hover:after { transform: scaleX(1); transform-origin: bottom left; }