How to remove underline from link in html

After reading this blog post, you will learn How to remove underline from link in html using CSS. The underline can be seen when anchor tag is used & by default underline is displayed by the browser within the range of anchor tag. Everything else is displayed normally.

Underlines are placed at the bottom of a text so that user can understand that something is clickable here & it will open another link. Another link can be of same website or another website. The link may open in same tab or another tab.

We use the CSS properties to remove underline & moreover the underlines can be designed more beautifully. The colors & font weight can also be changed so that the links looks more eye catchy.

In some scenarios the underline looks stubborn & refuses to walk away. This certainly means the CSS properties have not been applied in correct way. The basic syntax remains same but applying proper selectors solves this problem.

Before jumping into the code, let’s have a look at the text-decoration property that does the trick.

Text Decoration Property

The name of this property gives an idea of what it does. It simply decorated the text & adds an effect to the text that makes the text look highlighted & unique from rest.

text-decoration can be applied to the html tags like anchor, h1, p & span by using inline style attribute or using internal CSS.

Following are the values of this property that decorates the text.

Underline	The text will be displayed with underline. Underline is nothing but a line drawn below the text.
Overline	The line will be displayed at the top of the text.
Line-through	This is exact middle of underline & overline. Line will be displayed in the middle of the text.
None	All the above decorations will be removed. Anchor tags by default displays underline so by using this value the underline will be removed.

We can also use combination of the values at a single time. Suppose you want both underline & overline for the same text then both this values can be used by giving a space.

The decoration can further be styled by variations of the line that is displayed by making the use of text-decoration-style property. The values for this property can be provided like dashed | dotted | double | solid | wavy. By default, line will have solid effect. If you change it to dotted then line will be displayed with dots.

Practical Code

CSS :-

        a {
             text-decoration: none;
          }
        

HTML :-

        <a href="#">I am Hyperlink with removed underline</a>

Result :-

In the above example, text-decoration none is used to remove the underline of the anchor tag. The CSS is applied directly to all the anchor tags in the document.

Remove underline using Class & Id Selector

CSS :-

        .style1 {
            text-decoration: none;
        }

        #style2 {
            text-decoration: none;
        }

HTML :-

        <p>
            <a href="#" class="style1">I am Hyperlink with removed underline with Class selector</a>
        </p>
        <p>
            <a href="#" id="style2">I am Hyperlink with removed underline with Id selector</a>
        </p>

Result :-

Conclusion

Hopefully, we have solved your query of How to remove underline from link using CSS. CSS properties are never complex but on contrary easy to use & understand.

Single line of code does the trick & it is very much easy to try it out by yourself. As this is Client side programming so it is far away from the Server & is not dependent on Server side programming. It is fast & robust.

Enjoy Web Development 🙂