NAVIGATION

Animated Underline Navbar

A clean navigation menu with a smooth animated underline on hover. It uses simple HTML and CSS and works well for modern website headers.

HTML
<nav class="underline-navbar" aria-label="Primary Navigation">
  <a href="#">Home</a>
  <a href="#">Components</a>
  <a href="#">Playground</a>
  <a href="#">Blog</a>
  <a href="#">About</a>
</nav>
CSS
.underline-navbar{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:34px;
  flex-wrap:wrap;
}

.underline-navbar a{
  position:relative;
  padding:8px 0;
  color:#c7d2e5;
  font-size:15px;
  font-weight:600;
  text-decoration:none;
  transition:color .25s ease;
}

.underline-navbar a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:2px;
  border-radius:10px;

  background:linear-gradient(
    90deg,
    #22d3ee,
    #8b5cf6
  );

  transform:scaleX(0);
  transform-origin:right;
  transition:transform .3s ease;
}

.underline-navbar a:hover{
  color:#ffffff;
}

.underline-navbar a:hover::after{
  transform:scaleX(1);
  transform-origin:left;
}

How This Animated Underline Navbar Works

The Animated Underline Navbar is a CSS-only navigation component that reveals a cyan-to-purple line beneath each link on hover. Its HTML uses a semantic nav element with five anchors: Home, Components, Playground, Blog, and About.

The .underline-navbar container uses Flexbox to arrange these links horizontally. display: flex creates the row, align-items: center keeps the items vertically aligned, and justify-content: center centers the navigation group. A relatively wide 34px gap separates each link.

The container also has flex-wrap: wrap. This allows links to move onto another row when the available horizontal space is too limited for the full menu. The published CSS does not contain any media queries, so Flexbox wrapping provides its built-in behavior for narrower containers.

Each anchor uses position: relative. This is important because the animated underline is an absolutely positioned ::after pseudo-element. By making the link the positioning reference, the underline can stay aligned with the width and bottom edge of its corresponding anchor.

The links use 8px 0 padding. There is vertical space above and below the text but no extra horizontal padding, which means the underline follows the natural width of each link rather than extending across a larger padded area.

The default text color is #c7d2e5, with a 15px font size and a font weight of 600. The normal browser underline is removed using text-decoration: none, leaving the custom pseudo-element responsible for the visible underline effect.

The .underline-navbar a::after pseudo-element contains an empty string and is positioned at left: 0 and bottom: 0. Its width is 100%, so it matches the width of the anchor. A height of 2px keeps the underline thin, while a 10px border radius rounds its ends.

The underline itself uses a 90deg linear gradient that runs from cyan #22d3ee to purple #8b5cf6. Rather than changing its width during interaction, the component animates the line with a CSS transform.

Initially, transform: scaleX(0) reduces the underline to zero horizontal scale. Its initial transform-origin is set to right, which determines the side around which that collapsed state is calculated.

When the link is hovered, the pseudo-element changes to transform: scaleX(1), restoring its full horizontal size. At the same time, transform-origin changes to left. The result is an underline that visually expands across the bottom of the link from the left side.

The transform transition lasts .3s and uses ease. The anchor text also changes from #c7d2e5 to white, using a slightly shorter .25s ease color transition. For more information about the scaling mechanism behind the underline, see the MDN transform documentation.

When the pointer leaves the link, the underline returns to scaleX(0). Because the normal state uses transform-origin: right, the line visually collapses toward the opposite side.

The Animated Underline Navbar does not use JavaScript. Its published JavaScript field is empty, so there are no event listeners, active-link classes, click handlers, or dynamically positioned indicators. The complete interaction relies on :hover, a pseudo-element, transforms, and CSS transitions.

Customizing the Animated Underline Navbar

The component’s spacing, typography, gradient, underline dimensions, and animation timing can be changed directly through the existing CSS.

  • Replace Home, Components, Playground, Blog, and About with the navigation labels required by your website.
  • Adjust the 34px Flexbox gap to increase or reduce the space between links.
  • Change the 15px font size or 600 font weight to modify the navigation typography.
  • Replace #22d3ee and #8b5cf6 with different colors for the underline gradient.
  • Change the 90deg gradient angle to alter the direction in which the colors blend.
  • Adjust the underline’s 2px height to make it thinner or thicker.
  • Modify scaleX(0) and the transform origins if you want to change how the line enters and exits.
  • Change the .3s transform transition or .25s text transition to adjust the animation timing.

Where to Use This Animated Underline Navbar

This component works well when navigation needs lightweight hover feedback without adding filled backgrounds or large animated elements.

  • Developer portfolio websites
  • Personal blogs
  • Documentation websites
  • Product landing pages
  • Creative agency websites
  • Component and project showcases

Because the effect is attached independently to every anchor, no shared indicator or JavaScript positioning is required. For a navigation design with a more prominent animated menu entrance, the Animated Fly-In Navigation Menu provides a related CodeRipple pattern.

Frequently Asked Questions

How is the animated underline created?

Each link has an absolutely positioned ::after pseudo-element. It uses a two-color gradient and changes from scaleX(0) to scaleX(1) when the link is hovered.

Why does the component change transform-origin?

The normal state uses transform-origin: right, while the hover state uses transform-origin: left. These origins control which side the scaled underline visually expands from and collapses toward.

Does the Animated Underline Navbar use JavaScript?

No. The published JavaScript field is empty. The complete underline interaction is implemented with CSS pseudo-elements, transforms, transitions, and :hover.

How does the navbar behave on narrower screens?

The container uses flex-wrap: wrap, allowing links to move onto another row when necessary. There is no dedicated responsive media query or hamburger menu in the supplied code.

The Animated Underline Navbar uses a gradient pseudo-element, horizontal scaling, changing transform origins, and simple text transitions to provide compact navigation feedback entirely through CSS.

Scroll to Top