Removing underline from link elements using CSS

Using CSS to remove the underline style from link elements

Posted on August 19, 2021


By default, all links in an HTML document rendered using the <a> tag will have a blue color and an underline to mark it as a link to another page.

This style is inherent to all modern browsers because the HTML specification standard needs links to be styled like that.

To override and remove the underline from link elements, you need to apply the CSS property text-decoration:none to your <a> tags.

The following style should be sufficient to remove the underline from your links:

a {
  text-decoration: none;
}

But if you don’t want the style to affect all <a> tags, then you can create a CSS class selector as shown below:

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

Anytime you need the underline to be removed, apply the class above to the <a> tag as follows:

<a class="no-underline" href="google.com">To Google</a>

Alternatively, you can also remove the underline only when the user hovers over the link by adding :hover state to the CSS rule.

The following rule will remove the link underline only when the user hovers to the element:

<style>
.no-underline:hover {
  text-decoration: none; 
}
</style>
<a class="no-underline" href="google.com">To Google</a>

And that’s how you can remove underline from link elements using CSS 😉

See also:

Level up your programming skills

I'm sending out an occasional email with the latest programming tutorials. Drop your email in the box below and I'll send new stuff straight into your inbox!

No spam. Unsubscribe anytime.