August 4, 2026 in CSS, HTML

Creating Dynamic Underline Effects with CSS

Enhancing the visual appeal of your website doesn’t always require complex animations or heavy libraries. Sometimes, subtle UI details—like a stylish animated underline—can make your typography feel modern, interactive, and polished. In this post, we’ll explore how to create a smooth, eye-catching underline animation using pure CSS. We’ll also break down the key code concepts and show you how to implement the effect in your own projects.

Add a Modern Highlight With CSS Underline Animation

Animated text highlights are becoming increasingly popular in contemporary web design. They help guide user attention, improve readability, and add a touch of sophistication to UI elements. The .underline class below uses CSS gradients and animations to create this effect.

.underline {
  display: inline;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 60%,
    rgba(126, 215, 232, 0.5) 60%,
    rgba(126, 215, 232, 0.85) 100%
  );
  background-size: 0% 100%;
  background-repeat: no-repeat;
  background-position: left bottom;
  animation: slide-in 2s forwards;
}

How It Works

• linear-gradient
Creates a subtle blue highlight that begins at 60%, giving depth and a soft bottom glow that feels natural beneath the text.
• background-size: 0% 100%
Starts the underline in a fully collapsed state, making the animation appear as though it is “growing” across the text.
• animation: slide-in 2s forwards
• Runs a smooth two-second animation, ending in a fully expanded underline that stays visible after completion.

Creating the Sliding Animation

The underline animation is defined using a simple keyframes rule:

@keyframes slide-in {
  from {
    background-size: 0% 100%;
  }
  to {
    background-size: 100% 100%;
  }
}

This expands the gradient from left to right, producing a clean horizontal sweep that draws the user’s attention without being distracting.

Implementing the Underline in HTML

Adding this underline effect is straightforward. Wrap any text in a <span> and apply the .underline class:

<span class="underline" data-delay="500">Elegance.</span>

Tips for Implementation

• Reuse the .underline class to maintain consistency across your site.
• Enhance timing with JavaScript by reading the data-delay attribute to stagger animations for headings or sections.
• Combine with scroll animations for even richer visual experiences.

You can explore the full preview and source code in CodeSandbox for hands-on experimentation.

Conclusion

CSS underline animations are a simple yet effective way to elevate your website’s design and improve user interaction. By adding dynamic, visually appealing highlights to key phrases, you can guide attention, reinforce calls to action, and create a more engaging user experience—all with minimal code.