How do you Display Hyperlinks without an Underline

How do you display hyperlinks without an underline?

When a hyperlink is added on a web page, it will by default show an underline.

To remove the underline, we have to use the text-decoration: none. This will remove the underline from the anchor tags.

To remove the underline from all the anchor tags in the application, we will have to use the below code in an External CSS file.

If you wish to remove underline from a single page then you can use the internal CSS.

CSS :-

    a { text-decoration: none;} 

HTML :-

    <a href="#">Click Link</a><br>
    <a href="#">Click Link</a> 

Result :-

In the above CSS code, we have applied the text-decoration: none to anchor selector. This style will be applied to all the anchor tags on the page.

In the HTML code, we have added 2 anchor link tags.

We can see in the output image that there is no underline displayed for both the anchor tags.

Display hyperlinks without an underline - Using Classes

In the above example, the underline will get removed for all the anchor tags.

If we want more dynamicness then we can add classes to the anchor tags & apply styles to the classes.

This will give an advantage of applying the styles only to the required anchors.

Also we can make use of various class styles for multiple color theme designs.

CSS :-

    a.noUnderline{ text-decoration: none;} 

HTML :-

    <a href="#">Click Link</a><br>
    <a href="#">Click Link</a>
    <br><br>
    <a href="#" class="noUnderline">Click Link</a><br>
    <a href="#" class="noUnderline">Click Link</a>
    <br><br>
    <a href="#" id="clickLink">Click Link</a><br> 

Result :-

Display hyperlinks without an underline under a particular Section

In a scenario, when we want to remove the underline only within a particular section of page then we can use the below code.

First we have to give a class to the wrapper or the parent element.

Then we apply the style for all the anchors within that parent element.

Let's see this in the code.

CSS :-

    .section a{ text-decoration: none;} 

HTML :-

    <a href="#">Click Link</a><br>
    <a href="#">Click Link</a>
    <br><br>
    <div class="section">
        <a href="#" class="noUnderline">Click Link</a><br>
        <a href="#" class="noUnderline">Click Link</a>
    </div>
    <br><br>
    <a href="#">Click Link</a><br>
    <a href="#">Click Link</a> 

Result :-

In the CSS style, we have first used the class name then it is followed by the anchor element. By doing this, the style will be applied to all the anchors within the class.

In the HTML code, we have used a wrapper div & given it a class named as section. We have added 2 anchor tags within this class.

In the Result, we can see the class style is only applied to a particular section & rest all anchor tags remain unaffected.

Conclusion

We have tried to answer your query for "How to display hyperlinks without an underline" in the most simplest & clear way to avoid any confusions.

CSS is very simple to use, with a single line of code we can achieve beautiful things.

Hope this article helps you. Keep Coding, Keep Learning & Keep Working.