How to Remove the Underline from a Link in CSS?

By default, hyperlinks (<a> elements) in HTML are underlined to indicate they are clickable. While underlines are useful for usability and accessibility, sometimes you may want to remove them for design purposes.

In this blog, we’ll explore different methods to remove the underline from links using CSS, while also covering best practices to maintain accessibility and usability.

1. Remove Underline Using text-decoration: none;

The most common way to remove the underline from a link is by using the text-decoration: none; property in CSS.

Example:

a {
    text-decoration: none; /* Removes the underline */
}

<a href="#">This is a link without an underline</a>

✅ Best for: Removing underlines from all links on a webpage.

---

2. Remove Underline from Specific Links

If you only want to remove the underline from specific links, use a class or ID selector instead of applying it to all <a> tags.

Example:

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

<a href="#" class="no-underline">No Underline Link</a>
<a href="#">This link still has an underline</a>

✅ Best for: Custom styling where some links should remain underlined.

---

3. Remove Underline Only on Hover

Sometimes, you may want links to have underlines by default but remove them when hovered over.

Example:

a {
    text-decoration: underline; /* Keep underline by default */
}

a:hover {
    text-decoration: none; /* Remove underline on hover */
}

<a href="#">Hover over this link to remove the underline</a>

✅ Best for: Interactive effects where links become more visually appealing on hover.

---

4. Remove Underline for Visited Links Only

To remove underlines only from visited links, use the :visited pseudo-class.

Example:

a:visited {
    text-decoration: none;
}

✅ Best for: Styling visited links differently without affecting unvisited links.

---

5. Remove Underline for Links Inside a Navigation Menu

If you’re styling a navigation bar and don’t want underlines on menu items, target only those links inside the <nav> element.

Example:

nav a {
    text-decoration: none;
    color: #333; /* Custom text color */
    font-weight: bold;
}

nav a:hover {
    text-decoration: underline; /* Optional: add underline on hover */
}

<nav>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
</nav>

✅ Best for: Keeping navigation menus clean and modern.

---

6. Removing Underline but Keeping Accessibility

Removing underlines can make it harder for users to recognize links, especially for those with visual impairments. To ensure good usability:

✔ Keep links a different color from normal text.
✔ Use bold or background changes on hover to indicate interactivity.

Example:

a {
    text-decoration: none;
    color: #007bff; /* Keep links blue for visibility */
}

a:hover {
    text-decoration: underline; /* Show underline on hover */
}

✅ Best for: Making sure links remain recognizable even without an underline.

---

Conclusion

Removing link underlines in CSS is simple using text-decoration: none;. However, it’s important to ensure links are still easily identifiable. By using hover effects, colors, and styles, you can maintain both aesthetics and usability.