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

Learn & practice CSS with real-world examples
Learn basic CSS from the ground up.
Build real projects in HTML CSS.
Make your hands dirty

Build HTML CSS projects

About us templatePreview
Team pagePreview
Testimonial pagePreview
Testimonial sliderPreview
Contact pagePreview
Multipage websitePreview
Portfolio websitePreview
Animated portfolioPreview
Computer science portfolioPreview
Navigation bar (without JS)N/A
Create a hamburger menuPreview
Create a navigation menu in two waysN/A
Footer templatesPreview
Hero bannerPreview
Background sliderPreview
Card templates (HTML, CSS)Preview
Animated cardsPreview
Three-column layout templatePreview
Two column layoutPreview
Breadcrumb navigationN/A
Progress bar templatePreview
Thank you pagePreview
Resume templatePreview
Coming soon templatePreview
Landing page templatePreview
Roofing website templatePreview