How to Remove the Underline from a Hyperlink in CSS?

By default, hyperlinks (<a> elements) are underlined in most browsers. While underlines help users recognize clickable links, there are cases where you might want to remove them for a cleaner design.

In this blog, we will explore multiple ways to remove the underline from hyperlinks in CSS and discuss best practices to maintain accessibility and usability.

1. Remove Underline Using text-decoration: none;

The simplest and most effective way to remove the underline from a hyperlink is by using the text-decoration property.

a {
    text-decoration: none;
}

<a href="#">Click Me</a>

✅ This removes the underline from all links on the webpage.

2. Remove Underline from Specific Links

If you want to remove the underline from certain links only, use a class or ID selector.

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

<a href="#" class="no-underline">No Underline Link</a>
<a href="#">Default Underlined Link</a>

✅ This keeps underlines on other links while removing them only for links with .no-underline.

3. Remove Underline from Hovered Links Only

You can hide the underline on hover while keeping it for default state:

a:hover {
    text-decoration: none;
}

✅ This maintains default link styling but removes the underline when users hover over the link.

4. Remove Underline for All Link States

To ensure the underline is removed across different link states (normal, hover, active, visited), use the following CSS:

a, a:visited, a:hover, a:active {
    text-decoration: none;
}

✅ This guarantees the link never shows an underline, regardless of state.

5. Remove Underline While Keeping Accessibility

Removing underlines may reduce accessibility since users might not recognize links easily. A good practice is to replace the underline with a color change or other visual cues:

a {
    text-decoration: none;
    color: #007bff;
}

a:hover {
    color: #ff4500;
    text-decoration: underline;
}

✅ This approach improves usability by changing the color and showing an underline only on hover.

Conclusion

To remove the underline from hyperlinks in CSS:
✔️ Use text-decoration: none; for basic removal.
✔️ Apply styles selectively using classes or IDs.
✔️ Remove the underline on hover while keeping other visual cues.
✔️ Ensure accessibility by using color changes or background effects.