Use CSS to remove the underline from the link in HTML. In CSS set the property “text-decoration” to “none”.
Examples of Remove underline from link CSS
Here is simple examples of it:-
Inline CSS Example
Just add text-decoration:none; to a tag for #none: Use it with the style attribute
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <head> </head> <body> <a href="http://yoursite.com/" style="text-decoration:none">yoursite</a> </div> </body> </html> |
Output:
Internal CSS Example
Try this, add a id(or class) to your a href
|
1 |
<a href="http://www.EyeHunt.com/" id="thisLink" target="_blank" rel="noopener noreferrer">EyeHunt.com</a> |
Below code belongs in the <head> of your document or in a stylesheet:
|
1 2 3 4 5 |
<style type="text/css"> #thisLink{ text-decoration: none; } </style> |
Complete Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <head> <style type="text/css"> #thisLink{ text-decoration: none; } </style> </head> <body> <a href="http://www.EyeHunt.com/" id="thisLink" target="_blank" rel="noopener noreferrer">EyeHunt.com</a> </div> </body> </html> |
Output:
Q: How to remove underline from a link in HTML?
Code for remove all underlines from all links:
|
1 |
a {text-decoration: none; } |
If you Want to Remove the underline of specific links then apply this to, give them a class name, like nounderline and do this:
|
1 |
a.inkNoLine{text-decoration: none; } |
It will apply only to same class name links and leave all others unaffected.
Do comment if you have any doubts and suggestions on this topic.
Note: The All HTML Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version
Degree in Computer Science and Engineer: App Developer and has multiple Programming languages experience. Enthusiasm for technology & like learning technical.