How to Remove Blue Underline From Link in CSS

1. Set the text-decoration Property to none to Remove Blue Underline From a Link in CSS
2. Use Pseudo-Classes for Selection to Remove Blue Underline From a Link in CSS
3. Remove the box-shadow Property to Remove the Underline and Color From a Link in CSS

This tutorial will introduce methods to remove the blue underline formed in the hyperlink in HTML. We will use CSS to remove such an underline.

Set the text-decoration Property to none to Remove Blue Underline From a Link in CSS

We can use the text-decoration property in CSS to specify the decoration of the text. The property is a short-hand property of three other properties. Those properties are text-decoration-line, text-decoration-color and text-decoration-style. The text-decoration-line property applies the text decorations like overline, underline, and line-through. The text-decoration-color property is responsible for setting the color of the text decoration, and the text-decoration-style applies different styles like solid, wavy, dotted, dashed to the text decoration. When we use the short-hand property text-decoration, we can specify the value as none. As a result, we can set all of the three properties to none. Consequently, it will remove the underline in the hyperlink and also removes the blue color.

For example, create a div with the class container. Then, inside the div, create a span with the class thisPage. Next, between the span tag, write the text Current Page. Write an anchor tag in the following line. Set the href attribute of the tag to #. Inside the anchor tag, write another span with the class otherPage. Write the text Next Page between the span. Then in the corresponding CSS file, select the anchor, tag which lies inside the container class as .container a. Set red color to the text using the hex code #FF0000. Then, set the text-decoration property to none.

The CSS below will set the text Next Page to red which is a hyperlink. The text-decoration property, which is set to none, will remove the underline and blue color of the element of the anchor tag.

Example Code:

<div class="container">
    <span class="thisPage">Current Page</span>
    <a href="#"><span class="otherPage">Next Page</span></a>
</div>

.container a {
  color: #FF0000;
  text-decoration: none;
}

Use Pseudo-Classes for Selection to Remove Blue Underline From a Link in CSS

We will select the pseudo-classes and apply the same CSS properties as the first method to remove the blue underline from a link. Previously, we only selected the anchor tag. In this method, we will use pseudo-classes to select the anchor tags. We will use pseudo-classes like :hover, :visited, :link, and :active. The :hover class applies when the user points the element with a pointing device such as a mouse but does not necessarily click the element. The :visited class applies when the link is already clicked. Likewise, the :link class selects all the unvisited links. And, the :active class selects the active link. We will use the same HTML document for the demonstration in this method.

For example. use the pseudo-classes :link, :visited, :hover and :active selecting the anchor tag. Separate each pseudo-classes with a comma. Set the text-decoration property to none and set the color property to #000000.

The CSS properties applied will come into effect to all the pseudo-classes in the example below. The a:link selector will change the hyperlink color to black and remove the underline when the link is unvisited. It overrides the color property among every other selector. The a:visited selector will remove the underline from the link after the link has been visited. The CSS effects will also take place when we hover over the link and at the time of clicking the link. In this way, we can remove the underline and the blue color from the link using the CSS pseudo-classes.

Example code:

<span class="thisPage">Current Page</span>
<a href="#"><span class="otherPage">Next Page</span></a>

a:link, a:visited,  a:hover, a:active
{
    color: #000000;
    text-decoration: none;
}

Remove the box-shadow Property to Remove the Underline and Color From a Link in CSS

Sometimes, the underline can be styled using the box-shadow property. We can provide the underline effect to any text using the property. The following CSS code snippet creates an underline.

box-shadow: inset 0 -3px 0 0 #bdb;

In such a case, if we want to remove the underline, we can remove the box-shadow property, or we can set the property’s value to none.

In the example below, a span class is styled in green color, and the box-shadow property is used to create a red-colored underline. Then, the property’s value is set to none, which removes the underline effect from the text.

Example Code:

<span class="thisPage">Current Page</span>

.thisPage {
  color: green;
  box-shadow: inset 0 -3px 0 0 red;
  box-shadow: none;
}