In this tutorial we will learn to remove underline from hyperlinks using CSS property and show our HTML links without underline.
When we create hyperlinks the anchor tags are also created and by default it’s underlined but we can remove it and show HTML links without underline. We can use CSS to remove underline by using its text decoration property to remove hyeprlink tag underlined by setting text decoration to none. This way the underline is removed which was added by default earlier.
Here is the code to remove hyperlink tag underlines:
text-decoration: none;We can see here the text-decoration property is set to none
Example #1
<!-- HTML code to remove underline
from anchor tag -->
<!DOCTYPE html>
<html>
<head>
<title>
text-decoration property
</title>
<!-- text-decoration property to remove
underline from anchor tag -->
<style>
#GFG {
text-decoration: none;
}
</style>
</head>
<body style = "text-align:center;">
<h1 style = "color:orange;" >
LaraMatic
</h1>
<h3>Original Link</h3>
<a href = "#">Link 1</a>
<br>
<h3>removed Underline</h3>
<a id = "GFG" href = "#">Link 2</a>
</body>
</html>
Example #2
Next we can use hover property to remove underline from anchor tags. Once we add the following code when we hover mouse on hyperlinks it will show them without underline. You can see output below.
<!-- HTML code to remove underline
from anchor tag -->
<!DOCTYPE html>
<html>
<head>
<title>
text-decoration property
</title>
<!-- text-decoration property to remove
underline from anchor tag -->
<style>
a:link {
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
</style>
</head>
<body style = "text-align:center;">
<h1 style = "color:orange;" >
LaraMatic
</h1>
<a id = "GFG" href = "#">LaraMatic Anchor Part</a>
</body>
</html>Before Mouse Hover
Underline After Mouse Hover
This is how we can remove hyperlinks underline using CSS text decoration property by just setting it to none.
