CSS How to Remove Underline From Link

a {
  text-decoration: none;
}

When styling a website you may want to remove the default underline from a link, like I have in with my navbar links.

Fortunately CSS offers many ways to remove the underline from a link. In this post you will learn how to remove underlines from links using CSS.

Firstly, when removing an underline from a link in CSS you need to understand what state it is in. The different states of a link are known as pseudo-classes, not to be confused with pseudo-elements and which state the link is in depends on the users activity.

The four different pseudo-classes are.

1. a:visited - the user has visited the link and it is stored in the browsers history
2. a:active -  right as the user is clicking on the link
3. a:hover - the user is hovering their mouse over the link
4. a:link - the default state of a link, meaning the use has not visited, hovered or clicked on the link yet.

Due to links being underlined originally to help the user determine that they could click a link, a links default is to have an underline for each of the above pseudo-states.

In order to remove the underline from your links, you can use the CSS text-decoration property.

This property has four values, underline, overline, line-through but the value we care about is none.

Here are a few ways to remove underline from link using the CSS property.

/* remove underline from all link states */

a {
  text-decoration: none;
}

/* remove underline from links individual states */

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

In the examples above we make CSS remove the underline for the link by adding text-decoration: none to all of the link states.

It is important to note that order matters with the pseudo-classes, a:link and a:visited must come before a:hover and hover must come before a:active. When you think about it, it's common sense. A link is in it's default state before you can visit it and it will be hovered over before the user clicks it, finally it sets the state to active. You can remember the states with a handy acronym LVHA (link, visited, hover, active).

Let's look at some examples to see how we can remove the underline from some states but keep it for others.

There is one more powerful CSS pseudo-class selector that can manage state for our links and it is the :any-link pseudo-class selector.

:any-link matches all elements that match :link or :visited so we can easily remove the underline for any link element that has a href attribute.

:any-link {
  text-decoration: none;
}