How to Remove the Underline of a Link in CSS ? - Coding

Ensuring that your links have the right appearance is important for usability. One common requirement is to remove the underline from links to give your webpage a cleaner look. In this article, we’ll show you how to use the CSS text-decoration: none; property to achieve this. Whether you want to apply this style to all links on your webpage or customize it further.

Table of Content

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

Using the text-decoration Property

The simplest way to remove underlines from links is by using the text-decoration property in CSS. By setting its value to none for the a selector, you can easily remove the underlines from all anchor elements on your webpage. This method is straightforward and effective for providing a cleaner appearance.

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="/tag">
            GeeksforGeeks
        </a>
    </p>
    <p>
        <a href="/tag"
        class="no-underline">
            GeeksforGeeks
        </a>
        is a computer science portal
    </p>
</body>

</html>

Output:

text-decoration

Removing the underline from links can significantly enhance the visual appeal of your website, making it look more modern and clean. By using CSS properties like text-decoration: none; and border-bottom: none;, you can achieve this with ease. Additionally, leveraging the :hover pseudo-class for further customization allows you to create interactive and user-friendly links. Implement these techniques in your web design to improve the user experience.

Reffered: https://www.geeksforgeeks.org

Geeks Premier League

Related
Find N'th Highest Salary Using Stream API
Remove Image Background using Paint in Windows11
How to Hide Full Screen Button of the Video Tag in HTML5 ?
How to Change the Size of Audio Player in HTML 5 ?
Is HTML Considered a Programming Language ?

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	14