CODEWITHSUNDEEP
html
Paic Ten
Paic Ten

Reputation: 1931

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?

Upvotes: 164

Views: 608713

Answers (8)

Ganesh M S
Ganesh M S

Reputation: 1063

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.

<a style="text-decoration:none" href="http://yoursite.com/">yoursite</a>

Upvotes: 5

patryk.beza
patryk.beza

Reputation: 5166

Inline version:

<a href="http://yoursite.com/" style="text-decoration:none">yoursite</a>

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.

Upvotes: 236

Joe Golton
Joe Golton

Reputation: 642

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:

border: none;

and

box-shadow: none;

Upvotes: 4

Roman
Roman

Reputation: 2175

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

a:hover {
   text-decoration:none;
}

Upvotes: 21

sd1990
sd1990

Reputation: 31

<style="text-decoration: none">

The above code will be enough.Just paste this into the link you want to remove underline from.

Upvotes: 2

John Conde
John Conde

Reputation: 219934

This will remove all underlines from all links:

a {text-decoration: none; }

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

a.nounderline {text-decoration: none; }

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

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

<head>
    <style type="text/css">
        a.nounderline {text-decoration: none; }
    </style>
</head>

And in the body:

<a href="#" class="nounderline">Link</a>

Upvotes: 65

0b10011
0b10011

Reputation: 18795

  1. Add this to your external style sheet (preferred):

    a {text-decoration:none;}

  2. Or add this to the <head> of your HTML document:

    <style type="text/css">
 a {text-decoration:none;}
</style>

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

    <!-- Add [ style="text-decoration:none;"] -->
<a href="http://example.com" style="text-decoration:none;">Text</a>

Upvotes: 7

nebulousGirl
nebulousGirl

Reputation: 1364

The following is not a best practice, but can sometimes prove useful

It is better to use the solution provided by John Conde, but sometimes, using external CSS is impossible. So you can add the following to your HTML tag: 

<a style="text-decoration:none;">My Link</a>

Upvotes: 3

Related Questions