In web design, every detail matters — including your links.

Like any other element, links can be styled with CSS properties. With CSS, you can change their color, background, and font-size. You can even remove the underline that appears below links.

How you write that CSS depends on what state the links are in. These states, also known as pseudo classes, are CSS classes based on user activity. Below the four pseudo classes are defined.

  • a:link — when the user has not visited, hovered, or clicked on a link
  • a:visited — after the user has visited the link
  • a:hover — when the user hovers their mouse over the link
  • a:active — as the user is clicking on the link

Free Intro Guide to HTML & CSS [Download Now]

By default, the underline will appear beneath links in every pseudo state: when hovered over, clicked on, visited, or none of the above. This is shown in the demo below.

Code demo showing link with underline

Image Source

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.

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:

 

 

   a:link {

  text-decoration: none;

}

a:visited {

  text-decoration: none;

}

a:hover {

  text-decoration: none;

}

a:active {

  text-decoration: none;

}

 

Here’s the HTML:

 

 

   <p><b><a href="default.asp" target="_blank">This is a link</a></b> that appears within a paragraph.</p>

Here’s the result:

Code demo showing link without underline

Image Source

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.

Code demo showing hover and active link state with the underline in Bootstrap

Image Source

To remove the underline in links, no matter their state, you need to add some CSS.

Here’s the CSS:

 

 

   a:hover {

  text-decoration: none;

}

    a:active {

  text-decoration: none;

}

 

Here’s the HTML:

 

 

   <p><b><a href="default.asp" target="_blank">This is a link</a></b> that appears within a paragraph. Below is a link defined by Bootstrap's button class.</p>

  <a class="btn btn-info" href="#" role="button">Link</a>

 

Here’s the result:

Code demo showing hover and active link state without the underline in Bootstrap

Image Source

Styling Links with CSS

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.

New Call-to-action

 css introduction

Originally published Jul 13, 2020 7:00:00 AM, updated July 13 2020

Topics:

Bootstrap & CSS