How to Remove Underline from Links in HTML

Prerequisites

• A code editor
• A browser
• Basic understanding of HTML and CSS

No additional setup is required.

Step-by-step instructions

Step 1: Use text-decoration: none; to remove underlines

Browsers underline links by default. The main technique to remove that underline is setting text-decoration to none.

Remove underlines from all links

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

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

Remove underlines from specific links using a class

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

<ahref="#"class="no-underline">Menu Link</a>
<ahref="#">Regular Link</a>

Remove underlines only on hover

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

Remove underlines by default and show them on hover

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

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

What to look for:

• Apply text-decoration: none; to a for all links or a class for specific links.
• Use :hover rules if you want different behavior on hover.
• If your rule does not apply, another selector may be overriding it.
• Keep links visually distinct even without underlines.

Examples you can copy

Example 1: Navigation menu

<style>
nava {
    text-decoration:none;
    margin-right:16px;
    color: #2563eb;
  }

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

<nav>
<ahref="#">Home</a>
<ahref="#">About</a>
<ahref="#">Contact</a>
</nav>

Example 2: Button-style link

<style>
  .button-link {
    text-decoration:none;
    background-color: #2563eb;
    color:white;
    padding:10px16px;
    border-radius:6px;
    display:inline-block;
  }
</style>

<ahref="#"class="button-link">Get Started</a>

Example 3: Footer links with hover effect

<style>
footera {
    text-decoration:none;
    color: #444;
    margin-right:12px;
  }

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

<footer>
<ahref="#">Privacy Policy</a>
<ahref="#">Terms of Service</a>
</footer>

Common mistakes and how to fix them

Mistake 1: Using the <u> tag (the opposite of what you want)

What you might do

<u><ahref="#">Link</a></u>

Why it breaks

<u> forces an underline. Styling belongs in CSS.

Fix

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

<ahref="#">Link</a>

Mistake 2: Styling a class you never added

What you might do

.link {
  text-decoration:none;
}

But your HTML is:

<ahref="#">Link</a>

Why it breaks

The selector does not match the element.

Fix

<ahref="#"class="link">Link</a>

Mistake 3: Losing to CSS specificity

What you might do

a {
  text-decoration:none;
}

But another rule overrides it:

nava {
  text-decoration:underline;
}

Why it breaks

More specific selectors take priority.

Fix

Match the same scope:

nava {
  text-decoration:none;
}

Troubleshooting

If the underline stays, inspect the link in DevTools and check which rule wins.

If only some links change, confirm your selectors match the elements you expect.

If hover behavior is wrong, check the order of your a and a:hover rules.

If changes do not apply, hard refresh the page to avoid cached CSS.

Quick recap

• Remove underlines with text-decoration: none;.
• Apply it to a for all links or a class for specific links.
• Use :hover rules to control hover behavior.
• Watch for CSS specificity conflicts.
• Keep links easy to recognize without underlines.