How to Remove the Underline of a Link in CSS ?

Last Updated : 08 Feb, 2024

To remove the underline from links in CSS, use the text-decoration: none; property. We can apply this to the ‘a' selector to target all anchor elements, which are typically used for links. This simple declaration will remove the underline from all links on your webpage.

Table of Content

Using the text-decoration Property
Using the text-decoration on :hover Pseudo-class

Using the text-decoration Property

Using the text-decoration property in CSS we can set its value to none for the a selector to remove underlines from links, providing a cleaner appearance to your webpage.

Example: Implementation to remove the underline of a link.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>
        text-decoration property
    </title>
 
    <style>
        body {
            text-align: center;
        }
 
        .geeks {
            text-decoration: none;
        }
    </style>
</head>
 
<body>
 
    <h1>GeeksForGeeks</h1>
    <h3>Original Link</h3>
    <a href="#">Link 1</a>
    <br>
    <h3>Removed Underline from the link</h3>
    <a class="geeks" href="#">Link 2</a>
</body>
 
</html>

Output:

cxs

Using the text-decoration on :hover Pseudo-class

Using this method to visually remove the underline is by setting the border-bottom property to none. This approach allows for more customization of the link’s appearance.

Example: Implementation to remove the underline of a link.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>
        Remove Underline from Link with
        text-decoration using CSS
    </title>
 
    <style>
        body {
            text-align: center;
        }
 
        a:hover {
            text-decoration: none;
        }
 
        .no-underline:hover {
            text-decoration: none;
        }
    </style>
</head>
 
<body>
    <p>
        Welcome to
        <a href="https://www.geeksforgeeks.org">
              GeeksforGeeks
          </a>
    </p>
    <p>
        <a href="https://www.geeksforgeeks.org"
           class="no-underline">
            GeeksforGeeks
        </a>
        is a computer science portal
    </p>
</body>
 
</html>