Open In App

How to remove underline for anchors tag using CSS?

Improve
Improve
Like Article
Like
Save
Share
Report

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

Default :

This is the default hyperlink made with HTML.

Screenshot-2024-01-17-162447

  • a:link: Represents the default state of an inactive link.
  • a:visited: Reflects the appearance of a link after being clicked and visited by the user.
  • a:hover: Defines the style of a link when the user hovers over it.
  • a: active: Specifies the style of a link while the user is actively clicking on it.

Syntax:

text-decoration: none;

Example 1: Implementation to remove underline for anchor tag using CSS.

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        text-decoration property
    </title>
 
    <style>
        body {
            text-align: center;
        }
 
        h1 {
            color: green;
        }
 
        #GFG {
            text-decoration: none;
        }
    </style>
</head>
 
<body>
 
    <h1>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: Implemenattion by using hover property to remove underline when mouse move over the anchor part.

html




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


Output:

frt



Last Updated : 24 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads