How to remove underline from a:before using CSS ?
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:
Please Login to comment...