In web design, every detail matters — including your links.
This is a link that appears within a paragraph.
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.
This is a link that appears within a paragraph. Below is a link defined by Bootstrap's button class.
Link
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.