How to remove underline in css

How to Remove Underline from a Link in CSS – HTML Style Guide

If you’re a web developer, you’ve probably wanted to get rid of the default underline that appears when you add a link to a page.

Fortunately, just like other elements on a web page, you can style the anchor tags responsible for displaying a link.

In this article, I will show you how to remove the underline from a link with CSS. I will also show you the four states links can be in, and how to remove the underline for each one.

How to Remove Underline from a Link in CSS

By default, this is how the link tag appears in the browser:

Firstly, it is important to know that the link tag (anchor tag) can be in 4 different states called pseudo-classes:

N.B.: The states (pseudo-classes) must appear in the order listed above due to the cascading nature of CSS.

You can also remove the default underline all in one with the anchor element selector:

You can play with the 4 pseudo-classes of the link tag with this pen:

Anchor tag states

Conclusion

I hope this article helps you learn how to remove the default underline from links in CSS.

If you find the article helpful, don’t hesitate to share it with your friends and family.

Thanks for reading.

Web developer and technical writer focusing on frontend technologies.

If you read this far, tweet to the author to show them you care. Tweet a thanks

Learn to code for free. freeCodeCamp’s open source curriculum has helped more than 40,000 people get jobs as developers. Get started

freeCodeCamp is a donor-supported tax-exempt 501(c)(3) nonprofit organization (United States Federal Tax Identification Number: 82-0779546)

Donations to freeCodeCamp go toward our education initiatives, and help pay for servers, services, and staff.

Removing an underline from a link in css

I’ve been trying to remove an ugly underline from a webpage but for some reason it just won’t go away.

I’ve tried using text-decoration:none; and color: #FFFFFF; to no avail.

The snippet of code:

Real example: http://jsfiddle.net/c0c6g4rd/

5 Answers 5

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

Just add text-decoration:none; to a tag for #noneall :

Try this, add a id (or class ) to your a href

and add this to your css file:

This should remove the underline!

Here a Jsfiddle of that:

Add at the beginning of your css file:

With these lines you will remove this underline from all links in your html.

The root of this problem is that you can’t put a div (a block-level element) inside an a (an inline element. However, there are better ways of doing what you’re trying to do.

As the others said, this will apply to all links:

However, if you only want to apply it to that one link, add the id to the a like this rather than using another element:

Remove blue underline from link

How can I remove the blue underline from the link?

20 Answers 20

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

The anchor tag (link) also has pseudo-classes such as visited, hover, link and active. Make sure your style is applied to the state(s) in question and that no other styles are conflicting.

See W3.org for more information on user action pseudo-classes :hover, :active, and :focus.

Just add this attribute to your anchor tag

Or use the CSS way.

Sometimes what you’re seeing is a box shadow, not a text underline.

Try this (using whatever CSS selectors are appropriate for you):

You missed text-decoration:none for the anchor tag. So code should be following.

More standard properties for text-decoration

As a rule, if your «underline» is not the same color as your text [and the ‘color:’ is not overridden inline] it is not coming from «text-decoration:» It has to be «border-bottom:»

Don’t forget to take the border off your pseudo classes too!

This snippet assumes its on an anchor, change to it’s wrapper accordingly. and use specificity instead of «!important» after you track down the root cause.

Without seeing the page, hard to speculate.

How to remove underline from a link in HTML?

In my page I have put some links under which I don’t want any line, so, how can I remove that using HTML?

8 Answers 8

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

However remember that you should generally separate the content of your website (which is HTML), from the presentation (which is CSS). Therefore you should generally avoid inline styles.

See John’s answer to see equivalent answer using CSS.

This will remove all underlines from all links:

If you have specific links that you want to apply this to, give them a class name, like nounderline and do this:

That will apply only to those links and leave all others unaffected.

This code belongs in the of your document or in a stylesheet:

And in the body:

I suggest to use :hover to avoid underline if mouse pointer is over an anchor

Add this to your external style sheet (preferred):

Or add this to the of your HTML document:

Or add it to the a element itself (not recommended):

The other answers all mention text-decoration. Sometimes you use a WordPress theme or someone else’s CSS where links are underlined by other methods, so that text-decoration: none won’t turn off the underlining.

Border and box-shadow are two other methods I’m aware of for underlining links. To turn these off:

All the above-mentioned code did not work for me. When I dig into the problem I realize that it was not working because I’d placed the style after the href. When I placed the style before the href it was working as expected.

How to remove the underline for anchors(links)?

You can never assume how a browser will render your HTML. a tag renders an anchor which the browser chooses to display as underline by default. u is the only underline tag. the answers below are CSS answers

15 Answers 15

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

Use CSS. this removes underlines from a and u elements:

This will remove your colour as well as the underline that anchor tag exists with

The simplest option is this:

Of course, mixing CSS with HTML (i.e. inline CSS) is not a good idea, especially when you are using a tags all over the place.
That’s why it’s a good idea to add this to a stylesheet instead:

Or even this code in a JS file:

Use CSS to remove text-decoration s.

Best Option for you if you just want to remove the underline from anchor link only-

This will remove the underline.

Further, you can use a similar syntax for manipulating other styles too using-

Hope this helps!

P.S.- This is my first answer ever!

I’ve been troubled with this problem in web printing and solved. Verified result.

Sometime it will override by some rendering UI CSS. Better to use:

In my case there was a rule about hover-effect by the anchor, like this:

Of course, text-decoration: none; could not help in this situation. And I spend a lot of time until I found it out.

So: An underscore is not to be confused with a border-bottom.

When you want to use an anchor tag simply as a link without the added styling (such as the underline on hover or blue color) add class=»no-style» to the anchor tag. Then in your global stylesheet create the class «no-style».

This has two advantages.

To provide another perspective to the problem (as inferred from the title/contents of the original post):

If you want to track down what is creating rogue underlines in your HTML, use a debugging tool. There are plenty to choose from:

For Firefox there is FireBug;

For Opera there is Dragonfly (called «Developer tools» in the Tools->Advanced menu; comes with Opera by default);

For IE there is the «Internet Explorer Developer Toolbar», which is a separate download for IE7 and below, and is integrated in IE8 (hit F12).

I’ve no idea about Safari, Chrome and other minority browsers, but you should probably have at least one of the three above on your machine anyway.