CSS
How to Remove Underline from Links Using CSS
Hyperlinks (<a>
elements) are an essential part of web design, providing navigation and interactivity. By default, browsers display links with an underline to distinguish them from regular text. While underlines improve accessibility and usability, there are cases where you may want to remove them for design purposes.
In this guide, we’ll explore different ways to remove the underline from links using CSS, along with best practices to ensure usability and accessibility.
Using the text-decoration
Property
The primary way to remove the underline from links is by using the text-decoration
property. Setting it to none
removes the default underline.
Example 1: Remove Underline from All Links
a {
text-decoration: none;
}
<a href="#">This is a link without an underline</a>
By applying this rule, all <a>
elements on the page will no longer have an underline.
Removing Underline from Specific Links
If you want to target only specific links, use CSS classes or IDs instead of applying styles globally.
Example 2: Remove Underline from a Specific Link
.no-underline {
text-decoration: none;
}
<a href="#" class="no-underline">This link has no underline</a>
<a href="#">This link still has an underline</a>
This ensures that only links with the .no-underline
class will be affected.
Handling Hover, Active, and Visited States
To ensure the underline does not reappear when a user interacts with the link, remove text-decoration
for different link states:
a {
text-decoration: none;
}
a:hover,
a:focus,
a:active,
a:visited {
text-decoration: none;
}
Example 3: No Underline on Hover
a {
text-decoration: none;
color: blue; /* Maintain link visibility */
}
a:hover {
text-decoration: none;
color: darkblue;
}
This ensures that even when hovered or clicked, the link remains without an underline.
Removing Underline from Links Inside Navigation Menus
When styling navigation bars, it’s common to remove underlines while maintaining other styles like color and hover effects.
Example 4: Styling a Navigation Menu Without Underlines
.navbar a {
text-decoration: none;
color: #333;
font-weight: bold;
padding: 10px;
}
.navbar a:hover {
color: #007bff;
}
<nav class="navbar">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
This approach ensures a clean, modern look for navigation links.
Using all: unset
for Advanced Styling
If you want to reset all default styles applied to links, use all: unset;
which removes both underline and default colors:
a {
all: unset;
cursor: pointer;
}
However, this approach requires additional styling to ensure accessibility and usability.
Best Practices When Removing Link Underlines
- Maintain Accessibility
- If you remove underlines, make sure links remain visually distinct by using bold text, different colors, or hover effects.
- Example:
a { text-decoration: none; color: blue; font-weight: bold; }
- Use Underlines Where Necessary
- Links in body text should usually retain their underlines to improve readability and usability.
- For example, links inside paragraphs:
<p>Check out our <a href="#">latest updates</a> for more information.</p>
- Use Hover Effects for Better UX
- If underlines are removed, provide a clear hover effect to indicate interactivity:
a:hover { text-decoration: underline; }
- If underlines are removed, provide a clear hover effect to indicate interactivity:
Conclusion
Removing underlines from links in CSS is simple using the text-decoration: none;
property. However, it’s essential to consider usability and accessibility when doing so.
By using alternative styling methods such as bold text, color contrast, and hover effects, you can maintain a user-friendly design while keeping your website visually appealing.