By default, browsers render hyperlinks (<a> tags) with an underline to help users easily identify clickable elements. However, in modern web design, you may want to remove the underline for a sleeker look — especially when using buttons, nav menus, or styled links.
In this guide, you’ll learn how to remove hyperlink underlines using CSS, along with best practices to keep your links clear and accessible.
✅ Method 1: Use text-decoration: none;
The most straightforward way to remove the underline from hyperlinks is by using the text-decoration property.
📌 CSS:
a {
text-decoration: none;
}
📌 HTML:
<a href="#">This link has no underline</a>
✅ Result:
The link is still clickable but no longer has the default underline.
✅ Method 2: Target Only Specific Links
You may not want to remove underlines from all links—just certain ones (e.g., in a navigation bar).
📌 CSS:
.nav-link {
text-decoration: none;
}
📌 HTML:
<a href="#" class="nav-link">Home</a>
💡 This keeps other hyperlinks on your site using the default style.
✅ Method 3: Remove Underline on Hover
Sometimes, designers prefer underlines to appear only on hover for clarity.
📌 CSS:
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
✅ Use Case:
This creates a clean base style with helpful hover feedback.
✅ Method 4: Remove Underline and Add Custom Styling
If you remove the underline, consider adding other styling cues to indicate it’s a link.
📌 Example:
a.no-underline {
text-decoration: none;
color: #007bff;
font-weight: bold;
}
a.no-underline:hover {
color: #0056b3;
}
This keeps links visually distinct without relying on an underline.
🧾 Summary
| Goal | CSS Rule |
|---|---|
| Remove all underlines | a { text-decoration: none; } |
| Target specific class | .my-link { text-decoration: none; } |
| Add underline on hover | a:hover { text-decoration: underline; } |
| Add custom styles instead | Use color, weight, hover effects |
🧠 Conclusion
Removing underlines from hyperlinks is a simple CSS tweak that can modernize your design—especially in headers, nav bars, or styled buttons. Just be sure to keep your links visually recognizable so users know they can click.
Pro Tip: Use :hover, :focus, and color changes to ensure accessible and intuitive link interactions.
