Best IT Recipes

How to remove underline from link in HTML?

On my page, I put some links under which I do not need a string, so how to remove this using HTML?

+80
html
Jun 01 '12 at 16:15
source share
7 answers

Embedded Version :

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

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

See John answer for an equivalent answer using CSS .

+122
Jun 01 '12 at 16:19
source share

This will remove all underscores from all links:

 a {text-decoration: none; }

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

 a.nounderline {text-decoration: none; }

This will only apply to these links and leave all others unaffected.

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

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

And in the body:

 <a href="#" class="nounderline">Link</a>
+38
Jun 01 '12 at 16:16
source share

I suggest using: hover over mouse to avoid underlining if mouse is over anchor

 a:hover { text-decoration:none; }
+7
Feb 09 '14 at 13:08
source share

  • Add this to your external style sheet ( preferred ):

     a {text-decoration:none;}

  • Or add this to the <head> your HTML document:

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

  • 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>
+5
Jun 01 '12 at 16:18
source share

Another answer to all mentions the text layout. Sometimes you use a Wordpress theme or someone else's CSS where links are underlined by other methods, so the text design: none will turn off the underline.

Border and box-shadow are two other methods that I know of for underlining links. To disable them:

 border: none;

and

 box-shadow: none;
+2
Dec 11 '15 at 17:27
source share

The following is not a good practice, but can sometimes be useful

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

 <a style="text-decoration:none;">My Link</a>
+1
Jun 01 '12 at 16:21
source share
 <style="text-decoration: none">

The above code will suffice. Just paste it into the link you want to remove.

0
Nov 19 '13 at 9:20
source share


More articles:


All Articles