How To Remove Underline From Link in CSS

(There are 2 ways to remove those lines under a link using CSS)

Underlines below your link can be annoying when you want to make clickable text without having to display a line underneath it.

There are 3 ways to remove those lines under a link using CSS. What are they?

Sometimes they interfere with the text flow or worse, your UI design.

Not all clickable text needs an underline.

In CSS the line under a link is controlled by text-decoration property.

The property text-decoration is a shorthand for 4 different properties:

1. text-decoration-line (controls presence of line under text, above text or under a link)
2. text-decoration-thickness (controls thickness of line above or under the link or text)
3. text-decoration-color (controls color of the underline)
4. text-decoration-style (can be solid, wavy, double)

As you can see you can even control color of the wavy underline.

I don't think overline is used that often, have you ever seen it anywhere? 😅

How to remove line under a link

To remove underline from a link using inline CSS you can set text-decoreation to none:

<a href = "#" style = "text-decoration: none;">My link</a>

This example used inline css, where code was typed directly into style attribute of the element.

But how do you remove underline from all links on your page with a single CSS command?

CSS code to remove an underline from all hyperlinks

To remove underline from all hyperlinks on your page, assign text-decoration: none to the a tag itself as shown in this example:

a {
  text-decoration: none;
}

Where to place this code?

You should place this code inside your style tags in your HTML page source code.

Another way to remove line from a link in CSS

You can also use text-decoration-line property:

a {
  text-decoration-line: none;
}

Note: this will remove an underline from all links on your page.

Here's a link to this page with text-deocration-line: none applied:

How to remove underlines from links in CSS

Hide line under a link by changing its color to background color

This isn't just a hack.

There is a use case for this.

And that's when you still want the line to appear on hover.

a {
  text-decoration-color: #ffffff;
}

This will set color of the underline to white, same as background.

(Sure, text-decoration-line:none; can still be used to same effect.)

a:hover {
  text-decoration-color: #ff0000;
}

This will change color of your underline on a text link on mouse hover.

How to remove underline from links in different states

Remember that hyperlinks have 4 different states:

1. a:link link was not visited, hovered, or clicked on a link
2. a:visited this link has been visited (clicked on)
3. a:hover mouse cursor is currently hovering over the text link
4. a:active mouse button is held down but not yet released

So here's the code you would use to disable underline on any of link states:

a:link { text-decoration: none }
a:visited { text-decoration: none }
a:hover { text-decoration: none }
a:active { text-decoration: none }