How to Disable Underline for a Link Using CSS

By default, web browsers display hyperlinks with an underline to indicate they are clickable. However, you can disable the underline for links using the CSS text-decoration property. This is useful when styling navigation menus, buttons, or custom-designed hyperlinks.

The CSS code to remove the underline from a link (<a> tag) is shown below:

</>
Copy
/* Remove underline from all links */
a {
  text-decoration: none;
}

/* Remove underline from a specific link with ID */
a#no-underline {
  text-decoration: none;
}

Examples

Example 1. Removing Underline from All Links

In this example, we apply text-decoration: none; to all links, preventing them from displaying an underline.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    a {
      text-decoration: none;
      color: blue;
    }
  </style>
</head>
<body>
  <p><a href="https://www.example.com/1">No Underline Link 1</a></p>
  <p><a href="https://www.example.com/2">No Underline Link 2</a></p></body>
</html>

Output:

Example 2. Remove Underline from a Specific Link

In this example, we remove the underline only from a specific link using its id="no-underline", while other links remain underlined.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    a#no-underline {
      text-decoration: none;
      color: green;
    }
  </style>
</head>
<body>
  <p><a href="https://www.example.com">Default Underlined Link</a></p>
  <p><a id="no-underline" href="https://www.example.com">No Underline Link</a></p>
</body>
</html>

Output:

Example 3. Removing Underline on Hover

Sometimes, you may want to display an underline only when the user hovers over the link. This can be done using the :hover pseudo-class.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    a {
      text-decoration: none;
      color: red;
    }

    a:hover {
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <p><a href="https://www.example.com">Hover Over Me</a></p>
</body>
</html>

Conclusion

Disabling the underline for links using CSS is a simple and effective way to customize your website’s design. By using the text-decoration: none; property, you can remove underlines from all or specific links. Additionally, you can control when the underline appears, such as on hover, to improve user experience.