How can I create a hovering underline animation?

Store Design

Topic summary

Goal: replicate a smooth hover underline on header menu links (like akiufotografija.lt), with a persistent underline for the active page.

What was tried:

  • Store link shared for context. Initial CSS using span::after on .header__menu-item added. It shows an underline but it renders below the header, lacks a smooth fade-out, and causes the header to shift on hover.
  • Additional guidance to add code near in theme.liquid was suggested (details not provided in the snippet).
  • Revised CSS provided: sets hover underline via ::after, adds an active state (header__active-menu-item) with a different color, and applies positioning/transition changes.

Current issues:

  • Underlines (blue hover and red active) still appear below the header on hover; the active red line disappears when the cursor leaves, and the animation isn’t smooth. There is also interaction between hover and active states causing glitches.

Notes:

  • Screenshots and CSS code snippets are central to understanding the problem and attempted solutions.
  • No final resolution yet; further CSS adjustments are needed to fix positioning context, transitions, and persistent active state behavior.
Summarized with AI on January 2. AI used: gpt-5.
8 
.header__menu-item span:hover::after{
    opacity: 1;
    bottom: -8px;
}

.header__menu-item span::after{
    opacity: 0;
    position: absolute;
    content: "";
    bottom: -15px;
    left: 0;
    height: 2px;
    width: 100%;
    background-color: #2893ff;
    transition: all .2s;
    pointer-events: none;
}
.header__menu-item:hover span{
	display: block;
    position: relative;
    text-decoration: none;
    transition: .2s;
}
span.header__active-menu-item::after{
    opacity: 1;
    bottom: -8px;
    background-color: #ff6355;
}
.header__active-menu-item{
 	text-decoration: none;
 	text-underline-offset: unset;
 	display: block;
}

Repalce and add this css.

webizito_0-1711176159213.png
webizito_0-1711176159213.png1483×286 21.4 KB