Here’s the situation: You’re trying to remove the underlining of links on your website using CSS. But even though your CSS rule is written correctly, the text-decoration: none property just doesn’t work.
I’ve dealt with this problem more times than I can count. And I’ve written this guide to help you and others like you not have to spend hours struggling with it.
To find out how to make text-decoration: none work, read on below.
Why Your CSS Rule Isn’t Working
If your CSS rule for removing the underline from links is formatted correctly but still doesn’t work, it’s probably being overridden by another rule in one of the HTML document’s style sheets.
We’ve written about this in detail in a post titled, “How to Prevent CSS Override.” For the details, check out that post, then come back here and continue reading. For the long story short and the solution, read on below.
So, why isn’t your CSS rule working?
Because your links are being targeted by another CSS rule that’s overriding yours.
As a general rule of thumb, when multiple CSS rules are targeting the same property of the same DOM element, the one with the most specific selector overrides the others.
<html>
<body>
<a href="#" class="link" id="link-1">Link</a>
</body>
</html>We can target the text-decoration property of the <a> element in this HTML document with multiple CSS rules, each overriding the other.
Here’s how this works:
a { text-decoration: none; }
body a { text-decoration: underline; }
a.link { text-decoration: none; }
a#link-1 { text-decoration: underline; }
/* Rules with the !important keyword override all others */
a { text-decoration: none !important; }In CSS, this is called specificity. Basically, the CSS rule with the most specific selector always prevails over all others.
How to Make It Work
There are two ways to make text-decoration: underline work for the link (or links) in question.
The first is to rewrite your CSS rule’s selector so that it’s more specific than the selectors of any other CSS rules targeting the <a> element. (In doing so, it’s useful to open the inspector on your browser’s dev tools and see those selectors.)
The second is to add the !important keyword to the declaration of the text-decoration: none property in your CSS rule.
So if your CSS rule right now looks like this:
a { text-decoration: none; }Try making it look like this—and see if it fixes your problem:
a { text-decoration: none !important; }If you’re trying to override a CSS rule that’s inlined into the style="" attribute of an <a> element, this method is the only one that will work.
In Conclusion
Remember: When text-decoration: none isn’t working, your CSS rule is most probably being overridden by another CSS rule with a more specific selector.
Rewrite your CSS rule with a more specific selector or add the !important keyword to the end of the property declaration, and you should be able to make it work.
Thank you for reading this far and, in case you have any questions or would like to share tips of your own with the rest of this post’s readers, don’t hesitate to leave a reply below.
