To remove the underline from links, you can use the CSS text-decoration property. Below we’ll walk through how to define this property to completely remove the underline from links on your HTML site or Bootstrap site.
How to Remove the Underline from Links in CSS
Add your HTML to the section of your webpage.
Define the four pseudo classes of links with the text-decoration property in the section.
Make sure that a:link and a: visited come before a:hover, and a:active comes last. This is essential to the cascading of the stylesheet.
Set each property value to “none.”
The process of removing the underline is really that simple. Let’s take a look at the code altogether, then check out how it looks on the front end.
Here’s the CSS:
Here’s the HTML:
<p><b><a href="default.asp" target="_blank">This is a link</a></b> that appears within a paragraph.</p>
How to Remove the Underline from Links in CSS on a Bootstrap Site
This removal process differs slightly if you’re using Bootstrap CSS in your web project. Let’s briefly discuss the process for Bootstrap sites.
By default in Bootstrap, links only show the underline when they are in hover or active state. Meaning, as a visitor hovers over or clicks on a link, it will show the underline. Otherwise, the underline will not show in links, even if they’ve been visited. Also, links defined by the Bootstrap button class never show the underline.
Removing the underline in links is one of the most common questions from coders. The good news is the process is simple with the text-decoration property. You just need a little bit of knowledge of HTML and CSS to pull it off.
Originally published Jul 13, 2020 7:00:00 AM, updated July 13 2020