How to remove the underline from a link?

When you create a link, the underline is automatically added to the anchor text. This is the default behavior of any web browser.

But you can remove the underline from the link using the following CSS:

a{
    text-decoration: none;
}

The above CSS will remove the underline globally. That means the underline will disappear from all the links from your website.

But if you want to hide the underline from a specific link, you have to target the link by class or ID name. For example, you want to hide the underline from an element that has a CSS class named “unicorn.” Now you can apply the following CSS:

.unicorn a{
    text-decoration: none;
}

But if you still see the underline in your link and if the above CSS doesn’t work for you, then look for your “CSS Specificity.” But I don’t recommend you use the !important flag. And it can override other elements of your website that you may not notice immediately.

However, you can select your specific link with a deeper-level selector. If the .unicorn a selector doesn’t work for you, then you can give it an ID because IDs are overweighted than classes in CSS. For example:

#pizza a{
    text-decoration: none;
}

Also, if that still does not work for you, check if you can increase the specificity. Look at the following HTML & CSS:

<div class="tiger">
	<p class="unicorn" id="pizza">This is an example text and <a href="#">this is a link</a></p>
</div>

.tiger #pizza a{
    text-decoration: none;
}

It’s always a good practice to inspect the element and find out the problem.

For more information, see how to use multiple class & ID selectors. Also, the Adjacent Sibling Combinator can help you select one or more specific items in your CSS.

Learn more about HTML links

• How to add a link in HTML?
• How to open a link in a new tab in HTML?
• How to create an HTML download link?
• What is the difference between a link & button?
• How to create an HTML button that works like a link?
• How to make a div clickable link?
• How to create HTML anchor links that jump to another section?
• How to create an HTML mailto link (including email subject)?
• How to center a link in HTML & CSS?
• How to deactivate links using CSS?
• How to remove the underline from a link?

Build HTML CSS projects