How to Remove the Underline from Links in CSS

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

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:

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 site.

How to Remove the Underline from Links in CSS

1. Add your HTML to the section of your webpage.
2. Define the four pseudo-classes of links with the text-decoration property in the section.
3. 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.
4. Set each property value to “none.”

How To Land a Developer Role in the World of AI

A free checklist to you help you stand out from the competition featuring Software Developer and YouTube Creator Tech With Tim.

• Expert advice on how to build a portfolio
• Top programming languages to learn
• Resume building and interview tips
• Resources to strengthen communication skills

Download for Free Learn more Download for Free

Download Free

All fields are required.

You're all set!

Click this link to access this resource at any time.

Download Now

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:

Order is important here — a:link and a:visited must come first, then a:hover, then a:active.

Here’s the HTML:

Here’s the result:

See the Pen Remove Underline From Link With CSS 1 by Christina Perricone (@hubspot) on CodePen.

It’s also possible to toggle the underline to display only when the link is hovered and click. Do this with the rule text-decoration: underline; like so:

See the Pen Remove Underline From Link With CSS 2 by Christina Perricone (@hubspot) on CodePen.

How to Remove the Underline from Links in CSS in Bootstrap

The process to remove the underline from links differs slightly if you’re using Bootstrap CSS in your 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.

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

Here’s the CSS:

Here’s the HTML:

Here’s the result:

See the Pen Remove Underline From Link With CSS - Bootstrap by Christina Perricone (@hubspot) on CodePen.

Styling Links with CSS

Removing the underline in links is one of the most common questions from beginner front-end 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.

Editor's note: This post was originally published in July 2020 and has been updated for comprehensiveness.

How To Land a Developer Role in the World of AI

A free checklist to you help you stand out from the competition featuring Software Developer and YouTube Creator Tech With Tim.

• Expert advice on how to build a portfolio
• Top programming languages to learn
• Resume building and interview tips
• Resources to strengthen communication skills

Download for Free Learn more Download for Free

Download Free

All fields are required.

You're all set!

Click this link to access this resource at any time.

Download Now