Skip to content
Related Articles
Open in App
Not now

Related Articles

How to remove underline for anchors tag using CSS?

Improve Article
Save Article
  • Difficulty Level : Easy
  • Last Updated : 08 Feb, 2019
Improve Article
Save Article

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.




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

Output:

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




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

Output:
Before Mouse move over:

After Mouse move over:


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!