remove hyperlinks underline css
LaraMatic

Remove Underline From Hyperlinks Using CSS

In this tutorial we will learn to remove underline from hyperlinks using CSS property and show our HTML links without underline.

When we create hyperlinks the anchor tags are also created and by default it’s underlined but we can remove it and show HTML links without underline. We can use CSS to remove underline by using its text decoration property to remove hyeprlink tag underlined by setting text decoration to none. This way the underline is removed which was added by default earlier.
Here is the code to remove hyperlink tag underlines:

text-decoration: none;

We can see here the text-decoration property is set to none

Example #1

<!-- 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:orange;" > 
        LaraMatic 
    </h1>
      
    <h3>Original Link</h3>
      
    <a href = "#">Link 1</a>
      
    <br> 
      
    <h3>removed Underline</h3>
      
    <a id = "GFG" href = "#">Link 2</a> 
</body> 
  
</html>

remove anchor underline

Example #2

Next we can use hover property to remove underline from anchor tags. Once we add the following code when we hover mouse on hyperlinks it will show them without underline. You can see output below.

<!-- 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:orange;" > 
        LaraMatic 
    </h1>
      
    <a id = "GFG" href = "#">LaraMatic Anchor Part</a> 
</body> 
  
</html>

Before Mouse Hover

remove anchor underline 3

Underline After Mouse Hover

remove anchor underline tag

This is how we can remove hyperlinks underline using CSS text decoration property by just setting it to none.