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:
.png)