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:
Recommended Posts:
- How to remove underline for anchors tag using CSS?
- How to remove underline from link using JavaScript ?
- HTML | DOM Underline Object
- How to underline a text content using HTML ?
- How to add underline to canvas-type text using Fabric.js ?
- D3.js | d3.map.remove() Function
- PHP | Ds\Map remove() Function
- Remove a cookie using PHP
- D3.js | d3.set.remove() function
- p5.js | remove() Function
- How to remove SVG content?
- PHP | Ds\Deque remove() Function
- How to remove extension from string in PHP?
- PHP | Ds\Vector remove() Function
- jQuery | Remove Elements
- How to Remove Unused CSS From Your Website ?
- Mongoose | remove() Function
- PHP | Ds\Vector remove() Function
- Lodash | _.remove() Method
- How to remove the first character of string in PHP?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.
