Removing Underline From Link Elements Using CSS

Home » How To Remove Underline Link Css » Removing Underline From Link Elements Using CSS

Maybe your like

Sebhastian Logo
  • Home
  • About
  • Contact
  • Newsletter
Removing underline from link elements using CSS

by Nathan Sebhastian

Posted on Aug 19, 2021

Reading time: 1 minute

By default, all links in an HTML document rendered using the <a> tag will have a blue color and an underline to mark it as a link to another page.

This style is inherent to all modern browsers because the HTML specification standard needs links to be styled like that.

To override and remove the underline from link elements, you need to apply the CSS property text-decoration:none to your <a> tags.

The following style should be sufficient to remove the underline from your links:a { text-decoration: none; }

But if you don’t want the style to affect all <a> tags, then you can create a CSS class selector as shown below:.no-underline { text-decoration: none; }

Anytime you need the underline to be removed, apply the class above to the <a> tag as follows:<a class="no-underline" href="google.com">To Google</a>

Alternatively, you can also remove the underline only when the user hovers over the link by adding :hover state to the CSS rule.

The following rule will remove the link underline only when the user hovers to the element:<style> .no-underline:hover { text-decoration: none; } </style> <a class="no-underline" href="google.com">To Google</a>

And that’s how you can remove underline from link elements using CSS 😉

Take your skills to the next level ⚡️

I'm sending out an occasional email with the latest tutorials on programming, web development, and statistics. Drop your email in the box below and I'll send new stuff straight into your inbox!Subscribe No spam. Unsubscribe anytime.

About

Hello! This website is dedicated to help you learn tech and data science skills with its step-by-step, beginner-friendly tutorials.Learn statistics, JavaScript and other programming languages using clear examples written for people.

Learn more about this website

Connect with me on Twitter

Or LinkedIn

Search

Type the keyword below and hit enter

Tags

Click to see all tutorials tagged with:Android CSS DevTools Git HTML Java JavaScript Kotlin MySQL NodeJS npm PHP Python React Sequelize Statistics

Tag » How To Remove Underline Link Css