How to Remove the Blue Underline From Link in CSS

Links in HTML are hyperlinks by which you can jump to another site. In web design, links are connections between two web resources, for example, images, videos, pdf files, and webpages.

In HTML, a link is created by using the <a> tag. Within <a> tag, you can specify the URL and the link text. When a link is added, an underline appears under the link; however, the text-decoration property can be used to remove it.

This post will consider some examples to explain the below-listed aspects:

• text-decoration Property in CSS
• How to Remove Underline From a Link?

So, let’s begin!

text-decoration Property in CSS

To apply any type of decoration to the text, the text-decoration property is used. For example, the text-decoration property assists us in changing the text color, style, and decoration line.

Syntax

First, we will understand the syntax of the text-decoration property:

text-decoration is a shorthand property for the below-mentioned CSS properties:

• text-decoration-line: It is used to add a line on the text.
• text-decoration-color: It is used to apply color to the text’s line.
• text-decoration-thickness: It specifies the thickness of the line decoration.
• text-decoration-style: This property sets the line’s style.

With the use of the text-decoration property, we will remove the underline from the link in the following example.

How to Remove Underline from a Link?

In HTML, when we add a link, the line under the link text appears that can be removed using the text-decoration property.

Example

We will use the <a> tag to define a hyperlink. href is the hyperlink reference of the site, and it is used to give the address of the site. After giving the address, specify the name of the link because the link does not appear on the site. Only the name that we give will be visible:

You can see that a line under Facebook appears, which denotes that a hyperlink is attached to it:

Now we will move to the CSS and remove the blue underline.

Here, “a” refers to the link we assigned in the HTML section. We will set the attribute of the text-decoration property as “none”.

Output shows that the blue underline has been removed after assigning the “none” attribute to the text-decoration property:

We have offered the method related to removing the blue underline from the link in CSS.

Conclusion

To remove the blue underline from a link, the text-decoration property is used in CSS. To do that, set the “text-decoration” property’s value as “none”. This write-up explained the working of the text-decoration property and how to use it to remove the blue underline from the line with the help of suitable examples.