How to Remove Underline from a Link in HTML Using CSS

By default, HTML links (<a> tags) are styled with blue color and an underline, making them easily recognizable as clickable elements. However, in many modern designs, you may want to remove the underline to match your visual aesthetic—especially for navigation menus, buttons, or custom-styled links.

In this post, you’ll learn how to remove the underline from a link using CSS and best practices to maintain accessibility and usability.

---

🧪 The Problem: Default Link Style

Example:

<a href="https://example.com">Visit Example</a>

This renders as:

🔵 Underlined blue text.

---

✅ Solution: Use text-decoration: none;

To remove the underline from a link, you can use the text-decoration CSS property:

CSS:

a {
  text-decoration: none;
}

Result:

This removes the underline from all links on your page.

---

🎯 Targeting Specific Links Only

If you want to remove the underline only from a specific link or section, use a class or ID:

HTML:

<a href="#" class="no-underline">Click Me</a>

CSS:

.no-underline {
  text-decoration: none;
}

💡 This is the best practice for larger websites—avoid affecting global styles unintentionally.

---

🎨 Optional: Add Custom Styles for Better UX

If you remove the underline, it’s a good idea to add another visual cue to show that the text is clickable.

Example:

.no-underline {
  text-decoration: none;
  color: #007BFF;
  font-weight: bold;
}

.no-underline:hover {
  text-decoration: underline;
}

This adds underline only on hover, which improves clarity and interactivity.

---

📝 Summary

Goal	CSS Rule
Remove underline	text-decoration: none;
Restore underline	text-decoration: underline;
Only on hover	Use :hover pseudo-class
Custom targeting	Use class or ID selectors

---

🔐 Accessibility Tip

Always ensure links are visually distinguishable from regular text—even without the underline. You can use:

• Bold or colored text
• Hover/focus effects
• Icons or arrows (like →)

Removing underlines is okay—as long as links remain clearly interactive.

---

🧠 Conclusion

Removing underlines from links in HTML is easy with a simple CSS rule:

a {
  text-decoration: none;
}

But always remember: good design isn’t just about how it looks—it’s about how it works. Make sure your users can still tell what’s clickable, especially if you’re removing traditional indicators like underlines.