Removing underline from link elements using CSS

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 😉