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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>
    <a href="https://www.geeksforgeeks.org/">Link 1</a>
    <br>
    <div id="test">
        <h3>Removed Underline</h3>
        <a id="GFG" href="https://www.geeksforgeeks.org/">
            Link 2
        </a>
    </div>
</body>
  
</html>

chevron_right


Output:

Example 2: This example uses hover property to remove underline when mouse move over the a:before part.



filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>
    <a href="https://www.geeksforgeeks.org/">Link 1</a>
    <br>
    <div id="test">
        <h3>Removed Underline</h3>
        <a id="GFG" href="https://www.geeksforgeeks.org/">
            Link 2
        </a>
    </div>
</body>
  
</html>

chevron_right


Output:

Example 3: This example removes the underline only from a:before part.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>
    <a href="https://www.geeksforgeeks.org/">Link 1</a>
    <br>
    <div id="test">
        <h3>Removed Underline</h3>
        <a id="GFG" href="https://www.geeksforgeeks.org/">
            Link 2
        </a>
    </div>
</body>
  
</html>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

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.