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 {
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
- The background is a thin 1px line positioned under the text.
- background-size: 0 1px; makes it invisible (width is 0).
- When you hover, background-size: 100% 1px; expands it to full width.
- 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 Hover</title>
<style>
/* 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 */
}
</style>
</head>
<body>
<h2>Hover Over the Link</h2>
<p><a href="#" class="link">Hover me to see the underline</a></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!
