How to remove the underline for anchors(links)?

Question

Is there anyway (in CSS) to avoid the underline for the text and links introduced in the page .. ?

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 — Dead account, Jan 11 '10 at 11:14
The irony that someone is pedantic enough to make this comment, but not pedantic enough to spell the word correctly (or even consistently!) blows my mind. — Technetium, Nov 11 '15 at 23:14
In addition to answers below, handling `a:hover` should also be considered, most popular browsers tend to show an underline on anchors upon hovering. — Fr0zenFyr, May 04 '18 at 10:41

score 662 · Accepted Answer · edited Aug 20 '21 at 11:11

662

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

a, u {
  text-decoration: none;
}

Sometimes you need to override other styles for elements, in which case you can use the !important modifier on your rule:

a {
  text-decoration: none !important;
}

edited Aug 20 '21 at 11:11

Alexander van Oostenrijk

4,644
3
23
37

answered Jan 11 '10 at 11:11

Emil Vikström

90,431
16
141
175

1

If `color: black !important;` would be added for `body`, will that also set all elements, including anchors, visited anchors, hovered anchors to be always black? – Ωmega Dec 10 '13 at 18:14
Ωmega Δ, apparently not, and thanks to you pointing it out I found an error in the body rule overall. I have updated my answer. – Emil Vikström Dec 11 '13 at 10:00
What I found is that if you set style `text-decoration: none !important;` for `body` element, then it works for anchors only when you explicitly set style `text-decoration: inherit;` for `a` elements. – Ωmega Dec 11 '13 at 13:04
7

It's generally better to avoid `!important` and use specificity and cardinality to override styles, otherwise you can end up with a stylesheet full of `!important` without any understanding of the structure that makes it necessary. It is a code smell IMO. – Mike Lyons Feb 19 '15 at 22:42
`!important` is like having a nuke. But once you start down and are seduced to use `!important` other elements may get it (nuke) and the advantage is gone in favor of an impasse, which is great for the world, as MUD ensures peace, but in the world of css, such peace means you can't give something the advantage. – JasonGenX Aug 12 '19 at 17:29
For some reason, I had to set the text color to `unset` – Rishav Oct 17 '19 at 09:56
Also worth noting that text-decoration is not inherited, so won't pass through shadowroots...therefore won't necessarily apply throughout the whole of an app. – Max Waterman May 31 '22 at 08:55

score 36 · Answer 2 · answered Jan 11 '10 at 11:10

36

The css is

text-decoration: none;

and

text-decoration: underline;

answered Jan 11 '10 at 11:10

DanDan

10,462
8
53
69

score 18 · Answer 3 · edited Aug 20 '21 at 11:11

18

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

a {
  text-decoration: none;
}

a:hover {
  color: white;
  text-decoration: none;
  cursor: pointer;
}

edited Aug 20 '21 at 11:11

Alexander van Oostenrijk

4,644
3
23
37

answered Nov 10 '15 at 09:10

Ashwin Shahi

339
2
14

score 17 · Answer 4 · edited May 29 '19 at 11:01

17

The simplest option is this:

<a style="text-decoration: none">No underline</a>

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:

a {
    text-decoration: none;
}

Or even this code in a JS file:

var els = document.getElementsByTagName('a');

for (var el = 0; el < els.length; el++) {
    els[el].style["text-decoration"] = "none";
}

edited May 29 '19 at 11:01

skobaljic

9,379
1
25
51

answered May 17 '13 at 19:11

XLogic

187
1
2

Iphone/Android aren't good benchmarks as they do not represent the backwards HTML rendering of Gmail or Outlook. – Stuart Apr 14 '14 at 21:58
@XLogic: Thanks you so much – Monika Patel Jul 14 '16 at 09:59

score 13 · Answer 5 · edited Aug 20 '21 at 11:12

13

Use CSS to remove text-decorations.

a {
  text-decoration: none;
}

edited Aug 20 '21 at 11:12

Alexander van Oostenrijk

4,644
3
23
37

answered Jan 11 '10 at 11:10

Alan Haggai Alavi

72,802
19
102
127

score 10 · Answer 6 · edited Aug 20 '21 at 11:14

10

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

a {
  text-decoration: none !important;
}

It works!

edited Aug 20 '21 at 11:14

Alexander van Oostenrijk

4,644
3
23
37

answered Feb 26 '19 at 16:44

Incheol

111
1
3

score 8 · Answer 7 · edited Nov 06 '20 at 17:42

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

#content a {
    text-decoration-line:none;
}

This will remove the underline.

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

text-decoration: none;
text-decoration-color: blue;
text-decoration-skip: spaces;
text-decoration-style: dotted;

Hope this helps!

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

score 4 · Answer 8 · edited Aug 20 '21 at 11:13

4

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

a.className {
  text-decoration: none !important;
}

edited Aug 20 '21 at 11:13

Alexander van Oostenrijk

4,644
3
23
37

answered Jul 30 '13 at 06:32

Sanjib Karmakar

357
2
5
14

1

This is a terrible idea. http://stackoverflow.com/questions/8360190/is-it-bad-to-use-important-in-css-property – Benjamin Gruenbaum Dec 22 '15 at 16:50

score 4 · Answer 9 · edited Aug 20 '21 at 11:14

4

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

#content a:hover {
  border-bottom: 1px solid #333;
}

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.

edited Aug 20 '21 at 11:14

Alexander van Oostenrijk

4,644
3
23
37

answered May 01 '15 at 12:13

Alexander Khomenko

569
1
5
13

score 3 · Answer 10 · edited Aug 20 '21 at 11:14

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

.no-style {
    text-decoration: none !important;
}

This has two advantages.

It will not affect all anchor tags, just the ones with the "no-style" class added to them.
It will override any other styling that may otherwise prevent setting text-decoration to none.

score 2 · Answer 11 · answered Jan 11 '10 at 11:37

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.

Safari 3/4: http://www.macobserver.com/tmo/article/Safari_3.1_The_Magical_Develop_Menu/ — mplungjan, Aug 25 '10 at 05:27

score 2 · Answer 12 · answered Oct 04 '18 at 12:49

2

Use css property,

text-decoration:none;

To remove underline from the link.

answered Oct 04 '18 at 12:49

Smita Kagwade

281
1
4
12

score 0 · Answer 13 · answered Jan 11 '10 at 11:53

Don't forget to either include stylesheets using the link tag

http://www.w3schools.com/TAGS/tag_link.asp

Or enclose CSS within a style tag on your webpage.

<style>
  a { text-decoration:none; }
  p { text-decoration:underline; }
</style>

I wouldn't recommend using the underline on anything apart from links, underline is generally accepted as something that is clickable. If it isn't clickable don't underline it.

CSS basics can be picked up at w3schools

score 0 · Answer 14 · answered Jan 11 '10 at 12:36

0

<u>

is a deprecated tag.

Use...

<span class="underline">My text</span>

with a CSS file containing...

span.underline
{
    text-decoration: underline;
}

or just...

<span style="text-decoration:underline">My Text</span>

answered Jan 11 '10 at 12:36

Oundless

5,425
4
31
33

score 0 · Answer 15 · edited Nov 06 '20 at 17:45

The underline may be removed by a CSS property called text decoration.

<style>
    a {
        text-decoration:none;
    }
</style>

If you want to remove the underline for the text present in the elements other than a, the following syntax should be used.

<style>
    element-name{
        text-decoration:none;
    }
</style>

There are many other text-decoration values that may help you to design links.

How to remove the underline for anchors(links)?

15 Answers15

Linked

Related