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
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.
-
2killer! I never saw these underscore lines in all the years that I where doing html.... ^^– Alex CioJul 20, 2017 at 11:16
-
2John's answer still uses essentially inline styles. Separating your CSS means more than aliasing css in your html. Eg
class="big-and-red"
is aliasing not seperation.class="meaningful-domain-item"
then css.meaningful-domain-item { //big and red }
is. This answer sufficient to remind me which tag to use in my css +1. Feb 15, 2018 at 12:04 -
1This 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 href="yoursite.com" style="text-decoration:none">yoursite</a> May 15, 2018 at 12:48
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>
I suggest to use :hover to avoid underline if mouse pointer is over an anchor
a:hover {
text-decoration:none;
}
Add this to your external style sheet (preferred):
a {text-decoration:none;}
Or add this to the
<head>
of 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>
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;
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>
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>
<style="text-decoration: none">
The above code will be enough.Just paste this into the link you want to remove underline from.
style
attribute), it is still CSS. The other two tags are also completely valid (presentation
andhyperlink
). In the future, please don't remove (or add) tags to a question unless there is a valid reason to do so. Thanks!