How to remove underline from a:before using CSS ?
Last Updated :
23 Apr, 2020
The a:before is used to create an element before the content of the anchor tag and it displays underlined a:before part by default. To remove the underline from a:before using the text-decoration property of CSS and set element display to inline-block.
Syntax:
text-decoration:none;
display:inline-block;
Example 1: This example sets the text-decoration property to none.
<!DOCTYPE html>
< html >
< head >
< title >
How to remove underline
from a:before using CSS?
</ title >
< style >
#test a {
color: #05ff05;
text-decoration: none;
}
#test a:before {
color: #05ff05;
content: "* ";
text-decoration: none;
display: inline-block;
}
</ style >
</ head >
< body style = "text-align:center;" >
< h1 style = "color:green;" >GeeksForGeeks</ h1 >
< h3 >Original Link</ h3 >
< br >
< div id = "test" >
< h3 >Removed Underline</ h3 >
Link 2
</ a >
</ div >
</ body >
</ html >
|
Output:
Example 2: This example uses hover property to remove underline when mouse move over the a:before part.
<!DOCTYPE html>
< html >
< head >
< title >
How to remove underline
from a:before using CSS?
</ title >
< style >
#test a {
color: #05ff05;
}
#test a:hover {
color: #05ff05;
text-decoration: none;
}
#test a:before {
color: #05ff05;
content: "**";
}
#test a:before:hover {
color: #05ff05;
content: "**";
display: inline-block;
text-decoration: none;
}
</ style >
</ head >
< body style = "text-align:center;" >
< h1 style = "color:green;" >GeeksForGeeks</ h1 >
< h3 >Original Link</ h3 >
< br >
< div id = "test" >
< h3 >Removed Underline</ h3 >
Link 2
</ a >
</ div >
</ body >
</ html >
|
Output:
Example 3: This example removes the underline only from a:before part.
<!DOCTYPE html>
< html >
< head >
< title >
How to remove underline
from a:before using CSS?
</ title >
< style >
#test a {
color: #05ff05;
}
#test a:before {
color: #05ff05;
content: "**";
display: inline-block;
text-decoration: none;
}
</ style >
</ head >
< body style = "text-align:center;" >
< h1 style = "color:green;" >GeeksForGeeks</ h1 >
< h3 >Original Link</ h3 >
< br >
< div id = "test" >
< h3 >Removed Underline</ h3 >
Link 2
</ a >
</ div >
</ body >
</ html >
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...