How to remove underline for anchors tag using CSS?

The anchor tag is used to define the hyperlinks and it display underlined anchor part by default. The underline can be easily remove by using text-decoration property. The text-decoration property of CSS allows to decorate the text according to requirement. By setting the text-decoration to none to remove the underline from anchor tag.

Syntax:

text-decoration: none;

Example 1: This example sets the text-decoration property to none.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!-- HTML code to remove underline
    from anchor tag -->
<!DOCTYPE html> 
<html
  
<head
    <title
        text-decoration property 
    </title>
      
    <!-- text-decoration property to remove
        underline from anchor tag -->
    <style>
        #GFG {
            text-decoration: none;
        }
    </style>
</head
  
<body style = "text-align:center;"
  
    <h1 style = "color:green;"
        GeeksForGeeks 
    </h1>
      
    <h3>Original Link</h3>
      
    <a href = "#">Link 1</a>
      
    <br
      
    <h3>removed Underline</h3>
      
    <a id = "GFG" href = "#">Link 2</a
</body
  
</html>                    

chevron_right


Output:

Example 2: Use hover property to remove underline when mouse move over the anchor part.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!-- HTML code to remove underline
    from anchor tag -->
<!DOCTYPE html> 
<html
  
<head
    <title
        text-decoration property 
    </title>
      
    <!-- text-decoration property to remove
        underline from anchor tag -->
    <style>
        a:link {
            text-decoration: underline;
        }
        a:hover {
            text-decoration: none;
        }
    </style>
</head
  
<body style = "text-align:center;"
  
    <h1 style = "color:green;"
        GeeksforGeeks 
    </h1>
      
    <a id = "GFG" href = "#">GeeksforGeeks Anchor Part</a
</body
  
</html>                    

chevron_right


Output:
Before Mouse move over:

After Mouse move over:



My Personal Notes arrow_drop_up

I always try to put best of mine, Sometimes I fail and sometimes I get motivated

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.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.