How to Add a Smooth Underline Effect on Hover Using CSS

Have you ever seen a website where links get a cool underline effect only when you hover over them? It's a small detail, but it makes websites look sleek and modern.

In this post, I'll show you how to create an underline effect that appears when you hover over a link—but stays invisible by default. And the best part? It only takes a few lines of CSS!

Why Use This Effect?

By default, underlines on links can look a bit plain. Many websites remove them entirely and just change the text color when you hover. But adding a smooth underline effect makes links stand out in a stylish way while keeping them easy to read.

The CSS Trick Behind It

We're going to use the background property to create the underline instead of the default text-decoration. This gives us more control and allows us to animate it smoothly.

/* No underline by default */
.link
/* Underline appears on hover */
.link:hover

How It Works

  1. The background is a thin 1px line positioned under the text.
  2. background-size: 0 1px; makes it invisible (width is 0).
  3. When you hover, background-size: 100% 1px; expands it to full width.
  4. The transition makes it smooth and elegant.

Full Example (HTML + CSS)

Want to try it out? Here's a simple HTML file you can copy and paste into your browser:

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Underline on Hovertitle>
<style>
/* No underline by default */
.link
/* Underline appears on hover */
.link:hover
style>
head>
<body>
<h2>Hover Over the Linkh2>
<p><a href="#" class="link">Hover me to see the underlinea>p>
body>
html>

Conclusion

This effect is a simple but effective way to improve your website's design. It keeps your links looking clean while adding a subtle animation that grabs attention. Now, go ahead and try it on your website! 😊🚀

What do you think of this effect? Let me know in the comments!