Hi there, in This tutorial we are going to remove underline from links by Using CSS in HTML. So follow along and we will also cover other related questions to this (Remove underline from link) Topic.
using CSS text-decoration:none; property we can easily remove underline from HTML links.
So we have to write add this text-decoration:none; to our Anchor/Link tag as shown below.
all you need is this CSS property text-decoration:none; .
To use InlineCSS we need write style=" " attribute to our Anchor/link starting tag.
Then we can use text-decoration:none; property inside style=" " attrubute like this
style="text-decoration:none;"
index.html
<a href="#">With Underline</a><br/>
<a href="#" style="text-decoration:none;">Without Underline</a>
Results
If you are using external CSS or internal CSS then use this text-decoration:none; we need to select the link/anchor tag first.
We can select that using Tag ID or just by TAG NAME a{…}.
And we can use text-decoration:none; CSS like shown below.
To remove the default blue color from link just use CSS color:black; property.
Where you can choose any color like green, yellow, pink, gray, lightgray and more.
index.html [Inline CSS]
<a href="#" style="text-decoration:none; color:black;">Click Me</a>
Results
you can use Pure JavaScript or JQuery.
Pure JavaScript is good but its hard to select multiple Elements with that You have to use LOOP just for that.
So if you have only one LINK, then use Pure JavaScript But for Multiple Links you have to use jQuery.
my.js [With Tag Name]
document.getElementsByTagName("a")[0].style.textDecoration = "none";
my.js [With Element ID]
document.getElementById("mylink").style.textDecoration = "none";
my.js [Jquery]
$(document).ready(function() {
$("a").css({"text-decoration": "none"});
});
In HTML, text-decoration none (text-decoration:none;) removes all the Text element stylings like Underlines.
So if you want to remove Underlines from Links you can use this text-decoration:none; CSS property to get rid of that underline from the texts/links.
index.html
<a href="#" style="text-decoration: none;">Click Me</a>