Blog Post

How to Add a Smooth Underline Effect on Hover Using CSS

March 8, 2026 CSS trick by client

Have you ever noticed websites where links display a stylish underline only when you hover over them? It might seem like a small design detail, but it makes a website look more modern and interactive.

In this tutorial, you’ll learn how to create a smooth underline hover effect using CSS. The underline stays hidden by default and smoothly appears when a user hovers over the link.

The best part is that it only requires a few lines of CSS.

Why Use This Effect?

By default, HTML links usually have a simple underline. Many modern websites remove it and only change the text color on hover.

However, adding a smooth underline animation offers several advantages:

Makes links look more modern
Improves user experience
Keeps your design clean and minimal
Draws subtle attention to clickable elements

This effect is widely used in modern UI design.

The CSS Trick Behind It

Instead of using the default text-decoration, we create the underline using the background property. This gives us more control and allows us to animate the underline smoothly.

/* No underline by default */
.link {
  color: #0073e6; /* Link color */
  background: linear-gradient(to right, currentColor, currentColor)
              0 100% / 0 1px no-repeat; /* Invisible underline */
  text-decoration: none;
  transition: background-size .3s ease-in-out;
}/* Underline appears on hover */
.link:hover {
  background-size: 100% 1px; /* Full-width underline */
}

How It Works

Here is what happens behind the scenes:

The background property creates a thin 1px underline beneath the text.
background-size: 0 1px hides the underline initially.
When the user hovers over the link, background-size expands to 100% width.
The transition property animates the change smoothly.

This creates a clean and elegant hover animation.

Full Example (HTML + CSS)

You can test the effect using the following simple HTML example.

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Underline on Hover</title><style>/* No underline by default */
.link {
  color: #0073e6;
  background: linear-gradient(to right, currentColor, currentColor)
              0 100% / 0 1px no-repeat;
  text-decoration: none;
  transition: background-size .3s ease-in-out;
}/* Underline appears on hover */
.link:hover {
  background-size: 100% 1px;
}</style></head><body><h2>Hover Over the Link</h2><p>
<a href="#" class="link">Hover me to see the underline effect</a>
</p></body></html>

Where You Can Use This Effect

This CSS hover effect works great in many places, such as:

Navigation menus
Blog links
Call-to-action text
Footer links
Portfolio websites

It’s a simple trick that improves the overall feel of your website.

Conclusion

The smooth underline hover effect is a small but powerful design enhancement. It keeps links looking clean while adding a subtle animation that improves the user experience.

With just a few lines of CSS, you can make your website feel more polished and modern.

Try adding this effect to your website and see the difference it makes.

😊🚀

Tags: WordPress

Write a comment