How to remove underline from a:before using CSS ?

Last Updated : 23 Apr, 2020

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> 
    <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> 

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> 
    <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> 

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> 
    <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> 

Output:

How to Remove Underline from Links in CSS?

chaitanyashah707

Improve

Article Tags :

How to remove underline from a:before using CSS ?

Similar Reads

Thank You!

What kind of Experience do you want to share?