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 ?
- How to underline a text content using HTML ?
- How to add underline to canvas-type text using Fabric.js ?
- HTML | DOM Underline Object
- Remove border from IFrame using CSS
- How to remove indentation from an unordered list item using CSS?
- How to remove style added with .css() function using JavaScript?
- How to remove CSS property using JavaScript?
- How to remove CSS style of <style> tag using JavaScript/jQuery ?
- How to override the CSS properties of a class using another CSS class ?
- How to reset/remove CSS styles for element ?
- How to remove CSS “top” and “left” attribute with jQuery ?
- How to Remove Unused CSS From Your Website ?
- Difference between bootstrap.css and bootstrap-theme.css
- How to remove borders of a canvas-type text using Fabric.js ?
- How to remove all line breaks from a string using JavaScript?
- How to remove the table row in a table using JavaScript ?
- How to remove table row from table using jQuery ?
- How to fadeOut and remove a div using jQuery ?
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.
