How to remove underline for anchors tag using CSS?

CSS | Remove underlines from the links: In this tutorial, we will learn how to remove underline for anchors tag using CSS? By Apurva Mathur Last updated : July 22, 2023

You may have observed on several websites that all the links are always underlined in that annoying blue color, what if we don't want that blue underline below our links, or what if we want to change the color of that underline then what should we do in cases like these?

Answer: Use the CSS text-decoration property

To remove the underline for the anchors tag, you can simply use the CSS text-decoration property by specifying its value to 'none'. The text-decoration property is used to add some decoration/styles to our text. Underlines can be removed from a, a:hover, or/and a:focus.

CSS property to remove underlines from the anchor tags

Consider the below-given syntax for this:

Directly applying to a, and a:visited

<style>
a, a:visited {
  text-decoration: none;
}
</style>

Applying through class/id

<style>
#links {
  text-decoration: none;
}
</style>

Example to remove underline for anchors tag using CSS

<!DOCTYPE html>
<html>
  <head>
    <title>Remove underline for anchors tag</title>
    <style>
      #link2 {
      text-decoration: none;
      }
      #link3 {
      text-decoration-color: deeppink;
      }
    </style>
  </head>
  <body>
    <h1>Example to remove underline for anchors tag</h1>
    <h2>Link with blue underline</h2>
    <a href="#">Hello 1</a>
    <br>
    <h2>Link with no underline</h2>
    <a id="link2" href="#">Hello 2</a>
    <br>
    <h2>Link with colored underline</h2>
    <a id="link3" href="#">Hello 3</a>
  </body>
</html>

The output of the above example is –

Explanation

In the above example, I've taken three links that will give a better understanding of this topic.

Starting with the first link, this is the default link that we usually see on WebPages.

For the second link, here I've used the ID selector to give styling to the respective link. Setting text-decoration="none" will format the decoration to none.

In the third link, here also ID selector is used to add styling. You can give any color to style the text by using text-decoration-color.

Example to remove underlines directly applying to a, and a:visited

<!DOCTYPE html>
<html>
  <head>
    <title>Remove underline for anchors tag</title>
	
    <style>
      body{
       font-family: Verdana, Arial, Helvetica, sans-serif;
       font-size: 18px;
      }
      a, a:visited{
       text-decoration: none;
       color: #f40;
      }
      a:focus, a:hover{
       color: #006969;
      }
    </style>
	
  </head>
  <body>
    <h1>Example to remove underline for anchors tag</h1>
    <p>Explore the countries</p>
    <ul>
      <li><a href="#">India</a></li>
      <li><a href="#">USA</a></li>
      <li><a href="#">UK</a></li>
      <li><a href="#">Japan</a></li>
      <li><a href="#">France</a></li>
    </ul>
  </body>
</html>

The output of the above example is –

CSS Examples »

Should I size a textarea with CSS width / height or HTML cols / rows attributes?

Create a Page with Sidebar and Main Content Area using HTML & CSS