How to Remove Underlines from Links in CSS

By default, any text inside of an <a> tag will be underlined. This is because browsers ship with their own stylesheets to set a small amount styles on your HTML by default.

Something like Normalize.css exists to help override all of the browser defaults so you don’t have to worry about any browser quirks and your styles work as expected. But I digress.

To remove an underline from a link, reference the code below:

<style>
  .no-underline {
    text-decoration: none;
  }

  .underline {
    text-decoration: underline;
  }
</style>

<a class="no-underline" href="#">Not underlined</a>
<a class="underline" href="#">Underlined</a>

For accessibility and readability purposes, you may still want to make your links visually different so they stand out among the rest of your text.

Changing the color isn’t always enough to make your links stand out.