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.
4

Hello @d3X

.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;
}

Please add this css in your css file.
Thanks.