How to Remove the Blue Underline From Links in CSS

Link underlines in HTML are applied by default to differentiate them from regular text. However, for certain designs underlines may not complement the typography or layout. This complete guide covers how to remove link underlines in CSS across browsers and devices – while still adhering to accessibility standards.

Default Link Styling Review

First, let‘s understand the default styling of links set by browsers. Here is a look at the default CSS stylesheet rules for anchor tags:

a:-webkit-any-link {
  color: -webkit-link;
  cursor: pointer;  
  text-decoration: underline;
}

This applies to Chrome and other webkit-based browsers. The key line is the text-decoration: underline rule which renders that familiar blue underline we‘re accustomed to for links.

Firefox uses a similar default:

a:-moz-any-link {
  color: -moz-hyperlinktext;
  text-decoration: underline;
}  

Edge and Internet Explorer default links styling is comparable. So essentially all major browsers underline links out-of-the-box for consistency. But…

Why Would We Want to Remove Link Underlines?

There‘s valid reasons to override underlines in many instances:

Clean Modern Typography

Minimal sites with large custom fonts often rely on color change hover states rather than cluttering clean typefaces.

Emphasize Surrounding Content

In text-heavy sites like blogs, underlined links can be distracting and break text flow.

Professional Documents

Print CSS media queries exclude underlined links to match printed professional docs.

Creative Link Treatments

Unique hover animations, background clips, SVG icons often replace old-fashioned underlines.

So let‘s explore recommended techniques…

Approach 1: The text-decoration Property

We can remove any text decoration like underlines with the appropriately named text-decoration CSS property.

a {
  text-decoration: none;
}

This eliminates underlines on anchor tag links across browsers:

Browser	Full Support?
Chrome	Yes 👍
Firefox	Yes 👍

text-decoration: none works back to IE6+ and all modern mobile browsers removing need for browser prefixes. Perfect support!

To target additional link states like hover and focus, chain the rule:

a {
  text-decoration: none;  
}

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

This will strip underlines regardless of interaction.

One thing to watch is inheritance of text-decoration styles by nested descendant text elements like <span> and <strong>. Make sure no leftover underlines appear!

Now that we understand using text-decoration, let‘s compare that to another approach…

Approach 2: The border-bottom Property

We can also remove an underline by zeroing out the border-bottom property:

a {
  border-bottom: 0; /* Removes border */
} 

This achieves the same effect as text-decoration: none. Is one method preferred over the other? Let‘s compare them…

text-decoration vs. border-bottom:

text-decoration: none	border-bottom: 0
More abstract representation	More literally removes line
Arguably more semantic	Some claim more straightforward

Overall, both achieve the same result. Use whichever approach makes sense for your coding style.

Now let‘s shift gears to look at…

When To Remove Default Link Underlines

We covered why you may want to ditch underlines for certain designs, but when is it appropriate?

General Best Practice Guidelines

• Ensure links remain identifiable without underlines through color change, text style, hover effects, etc.
• Don‘t remove underlines without applying another differentiator – accessibility hazard!

Review the following comparisons on popular website designs regarding kept vs. removed underlines…

Modern Design Trends:

const ctx = document.getElementById(‘myChart‘);

new Chart(ctx, {
type: ‘pie‘,
data: {
labels: [‘With Underlines‘, ‘Without Underlines‘],
datasets: [{
data: [43, 57],
backgroundColor: [
‘rgba(0, 0, 255, 0.5)‘,
‘rgba(255, 0, 0, 0.5)‘
],
}] }
});

The majority of recent designs ditch underlines, relying on color change, svg icons, and hover treatments to indicate links. But note these sites reinforce clear differentiation to avoid accessibility issues.

For body content links on traditional sites, underlines are still widely used. Evaluate on a case-specific basis.

Additional Approaches to Stylized Link Underlines

While removing underlines completely works in the simple case, sometimes more advanced techniques are required depending on specificity issues or other edge cases.

Here are a few modern options that reconstruct underlined effects in new ways:

text-shadows

Combine with color overlays to generate strokes without inheritance drawbacks.

box-shadows

Draws underlines detached from the text baseline to bypass descendant inheritance.

background-images

Gradient underlines possible with masking that wrap links cleanly.

blend modes

Screen blend mode recreates bright underlined text over dark backgrounds.

SVG borders

Single SVG images can underline links with smooth edges – no pixilation.

These solutions require deeper CSS knowledge but deliver enhanced results while still retaining critical link differentiation.

Now let‘s examine…

Browser Compatibility Considerations

While removing link underlines works excellently across modern browsers, there are some legacy browser caveats depending on approach:

text-decoration: none;

Fully supported back through IE6+ with no prefixes needed. Certain very old mobile browsers (BB5, early Opera Mini) lack support for pseudo-classes like :hover.

border-bottom: 0;

Well supported overall but IE6 and IE7 do not apply this border removal to inline elements like anchors. Requires float or block display values to work on old IEs.

Testing your site designs across iOS and Android devices is highly recommended as mobile browsers tend to be inconsistent supporting the latest standards.

For these reasons, feature detection with a robust CSS reset file as fallback is suggested for removing underlines across all devices:

/* Remove underlines */ 

a {
  text-decoration: none;
  border-bottom: 0; 
}

/* Reset all link styles */

.no-cssgradients a {

 text-decoration: underline;

}

This method checks for background gradient support as proxy for age of browser to selectively reapply default link styling to older mobile/legacy desktop clients.

Now that we‘ve covered all methods, best practices, and compatibility for removing link underlines, let‘s conclude with key pointers to remember…

Summary

Key pointers in this guide:

• Use text-decoration: none or border-bottom: 0 to reliably remove default link underlines
• Mind additional link states like :hover and :focus to eliminate lines
• Ensure links remain clearly defined without underlines through color, style changes, etc.
• Consider fallback resets for mobile browsers inconsistent in CSS support
• Weigh if very old IE support (6 & 7) is required depending on project

By correctly applying the concepts covered here, you will be able to implement custom link designs without underlines for beautiful, accessible site experiences across platforms.

I welcome any feedback, insights, or questions – feel free to connect!