How to remove underline for anchors tag using CSS?
Last Updated :
24 Jan, 2024
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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...