How Do You Display Hyperlinks Without an Underline in HTML/CSS?

By default, browsers display hyperlinks with an underline to visually indicate that the text is clickable. However, in modern web design, many developers choose to remove the underline for a cleaner, more customized look — especially when using buttons or styled navigation links.

In this blog, we’ll explore how to remove the underline from hyperlinks using CSS, while preserving accessibility and usability.

Table of Contents

🔗 Default Behavior of Hyperlinks

When you create a link using the <a> tag, most browsers will render it like this:

<a href="https://example.com">Visit Example</a>

This will:

Show blue text
Add an underline
Turn purple after the link is visited

✅ CSS Solution: `text-decoration: none`

To remove the underline, you can use the text-decoration property in CSS and set it to none.

🎨 Example:

<a href="https://example.com" class="no-underline">Visit Example</a>

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

Or target all links:

a {
  text-decoration: none;
}

🔄 Add Styling for Better UX

Even if you remove the underline, make sure to style links clearly to indicate they are clickable. For example:

a {
  text-decoration: none;
  color: #007BFF;
}

a:hover {
  text-decoration: underline;
  color: #0056b3;
}

This improves user experience by reintroducing a hover underline or color change to show interactivity.

⚙️ Complete Example:

🧾 HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>No Underline Link</title>
  <style>
    a {
      text-decoration: none;
      color: #2c3e50;
    }

    a:hover {
      text-decoration: underline;
      color: #e74c3c;
    }
  </style>
</head>
<body>

  <p>Click here to <a href="https://example.com">visit our site</a> without an underline.</p>

</body>
</html>

🧠 Best Practices

Accessibility: Always make links visually distinct (e.g., color, weight, hover effects).
Consistency: Apply a consistent style across your site to avoid confusion.
Context: Avoid removing underlines in long paragraphs where links need to stand out.

📌 Conclusion

Removing the underline from hyperlinks is easy using CSS, but be sure to compensate with other visual cues to maintain a user-friendly interface.

✅ Key CSS:

a {
  text-decoration: none;
}

Customize with hover effects and colors to keep your site both modern and accessible.