Open In App

How to overrule underlining Hyperlinks ?

Improve
Improve
Like Article
Like
Save
Share
Report

In CSS, the hyperlinks are underlined by default. This is due to the default decoration that is imposed by HTML/CSS. To get rid of this underline, we need to do the following changes in the default decoration of the anchor tag using CSS. We can get rid of underlying hyperlinks by using CSS text-decoration property. If this property is set to none then there will be no underlined hyperlinks displayed.

Syntax:

a { 
    text-decoration: none; 
}

Example: In the given example, two hyperlinks are added to the HTML document which leads to the geeksforgeeks.org website. The hyperlink (here) is underlined by default. To remove the underline, CSS will be used in the following manner in the second hyperlink. After implementing the mentioned changes the underline is removed.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        /* Changing anchor tag's text
           decoration to none */
        #a2 {
            text-decoration: none;
        }
    </style>
</head>
 
<body>
    <h3>Hello Geeks!</h3>
    <!-- Defining hyperlink 'here' using
        <a> tag -->
 
    <p>To visit our website click
        <a href="https://www.geeksforgeeks.org/">here</a>
    </p>
    <b>Hyperlink is overruled:</b>
 
    <p>To visit our website click
        <a id="a2" href="https://www.geeksforgeeks.org/">
            here
        </a>
    </p>
</body>
</html>


Output:

overruled hyperlink


Last Updated : 05 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads