The anchor tag is used to define the hyperlinks and it displays the underlined anchor part by default. The underline can be easily removed by using the text-decoration property. The text-decoration property of CSS allows to decoration of the text according to requirement. By setting the text decoration to none remove the underline from the anchor tag.
Default :
This is the default hyperlink made with HTML.
- a:link: Represents the default state of an inactive link.
- a:visited: Reflects the appearance of a link after being clicked and visited by the user.
- a:hover: Defines the style of a link when the user hovers over it.
- a: active: Specifies the style of a link while the user is actively clicking on it.
Syntax:
text-decoration: none;
Example 1: Implementation to remove underline for anchor tag using CSS.
html
<!DOCTYPE html><html>
<head>
<title>
text-decoration property
</title>
<style>
body {
text-align: center;
}
h1 {
color: green;
}
#GFG {
text-decoration: none;
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
<h3>Original Link</h3>
<a href="#">Link 1</a>
<br>
<h3>removed Underline</h3>
<a id="GFG" href="#">Link 2</a>
</body>
</html>
|
Output:
Example 2: Implemenattion by using hover property to remove underline when mouse move over the anchor part.
html
<!DOCTYPE html><html>
<head>
<title>
text-decoration property
</title>
<style>
body {
text-align: center;
}
h1 {
color: green;
}
a:link {
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<a id="GFG" href="#">GeeksforGeeks Anchor Part</a>
</body>
</html>
|
Output:
Article Tags :
Recommended Articles