Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to overrule underlining Hyperlinks ?

  • Last Updated : 02 Sep, 2021

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 be none then there will be no underline 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

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!