How to remove the underline from a link (CSS)?

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 to use the “!important” property. Because using the “!important” property is not a good practice. And it can override other elements of your website which 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 following HTML & CSS example:

<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. Please let me know in the comment if you were able to remove the underline from the link using the above CSS examples & explanation.

If you have any questions or suggestions, feel free to contact me.