CODEWITHSUNDEEP
htmlcssunderline
Steven
Steven

Reputation: 25274

How to remove the underline for anchors(links)?

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

Upvotes: 421

Views: 724920

Answers (15)

Incheol
Incheol

Reputation: 131

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

a {
  text-decoration: none !important;
}

It works!

Upvotes: 12

Frederick John
Frederick John

Reputation: 527

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.

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

Upvotes: 4

Alexander Khomenko
Alexander Khomenko

Reputation: 597

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.

Upvotes: 4

Sanjib Karmakar
Sanjib Karmakar

Reputation: 357

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

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

Upvotes: 4

Alan Haggai Alavi
Alan Haggai Alavi

Reputation: 74202

Use CSS to remove text-decorations.

a {
  text-decoration: none;
}

Upvotes: 14

Ashwin Shahi
Ashwin Shahi

Reputation: 339

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;
}

Upvotes: 18

Emil Vikström
Emil Vikström

Reputation: 91892

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;
}

Upvotes: 684

Sheraz
Sheraz

Reputation: 1

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.

Upvotes: 0

praveen kaushik
praveen kaushik

Reputation: 126

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!

Upvotes: 9

XLogic
XLogic

Reputation: 197

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";
}

Upvotes: 18

Smita Kagwade
Smita Kagwade

Reputation: 293

Use css property,

text-decoration:none;

To remove underline from the link.

Upvotes: 2

Oundless
Oundless

Reputation: 5505

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

Upvotes: 0

ComputerUser
ComputerUser

Reputation: 4878

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

Upvotes: 0

Vilx-
Vilx-

Reputation: 106904

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.

Upvotes: 2

DanDan
DanDan

Reputation: 10562

The css is 

text-decoration: none;

and

text-decoration: underline;

Upvotes: 39

Related Questions