Remove blue underline from link

Css Problem Overview

I am attempting to have a link show up in white, without an underline. The text color shows up correctly as white, but the blue underline is stubbornly persisting. I tried text-decoration: none; and text-decoration: none !important; in the CSS to remove the link underline. Neither worked.

.boxhead .otherPage {
  color: #FFFFFF;
  text-decoration: none;
}

<div class="boxhead">
  <h2>
    <span class="thisPage">Current Page</span>
    <a href="myLink"><span class="otherPage">Different Page</span></a>
  </h2>
</div>

How can I remove the blue underline from the link?

Css Solutions

Solution 1 - Css

You are not applying text-decoration: none; to an anchor (.boxhead a) but to a span element (.boxhead).

Try this:

.boxhead a {
    color: #FFFFFF;
    text-decoration: none;
}

Solution 2 - Css

The anchor tag (link) also has pseudo-classes such as visited, hover, link and active. Make sure your style is applied to the state(s) in question and that no other styles are conflicting.

For example:

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

See W3.org for more information on user action pseudo-classes :hover, :active, and :focus.

Solution 3 - Css

text-decoration: none !important should remove it .. Are you sure there isn't a border-bottom: 1px solid lurking about? (Trace the computed style in Firebug/F12 in IE)

Solution 4 - Css

Just add this attribute to your anchor tag

style="text-decoration:none;"

Example:

<a href="page.html"  style="text-decoration:none;"></a>

Or use the CSS way.

.classname a {
    color: #FFFFFF;
    text-decoration: none;
}

Solution 5 - Css

Sometimes what you're seeing is a box shadow, not a text underline.

Try this (using whatever CSS selectors are appropriate for you):

a:hover, a:visited, a:link, a:active {

    text-decoration: none!important;

    -webkit-box-shadow: none!important;
	box-shadow: none!important;
}

Solution 6 - Css

You missed text-decoration:none for the anchor tag. So code should be following.

.boxhead a {
    text-decoration: none;
}

<div class="boxhead">
    <h2>
        <span class="thisPage">Current Page</span>
        <a href="myLink"><span class="otherPage">Different Page</span></a>
    </h2>
</div>

More standard properties for text-decoration

Solution 7 - Css

As a rule, if your "underline" is not the same color as your text [and the 'color:' is not overridden inline] it is not coming from "text-decoration:" It has to be "border-bottom:"

Don't forget to take the border off your pseudo classes too!

a, a:link, a:visited, a:active, a:hover {border:0!important;}

This snippet assumes its on an anchor, change to it's wrapper accordingly... and use specificity instead of "!important" after you track down the root cause.

Solution 8 - Css

Without seeing the page, hard to speculate.

But it sounds to me like you may have a border-bottom: 1px solid blue; being applied. Perhaps add border: none;. text-decoration: none !important is right, it's possible that you have another style that is still overriding that CSS though.

This is where using the Firefox Web Developer Toolbar is awesome, you can edit the CSS right there and see if things work, at least for Firefox. It's under CSS > Edit CSS.

Solution 9 - Css

While the other answers are correct, there is an easy way to get rid of the underline on all those pesky links:

a {
   text-decoration:none;
}

This will remove the underline from EVERY SINGLE LINK on your page!

Solution 10 - Css

  a {
    color: unset;
    text-decoration: unset;
  }

Solution 11 - Css

You've used text-decoration none in the wrong selector. You need to check which tag do you need for decoration none.

You may use this code

.boxhead h2 a{text-decoration: none;}

.boxhead a{text-decoration: none !important;}

a{text-decoration: none !important;}

Solution 12 - Css

Just use the property

border:0;

and you are covered. Worked perfectly for me when text-decoration property dint work at all.

Solution 13 - Css

If text-decoration: none or border: 0 doesn't work, try applying inline style in your html.

Solution 14 - Css

None of the answers worked for me. In my case there was a standard

a:-webkit-any-link {
text-decoration: underline;

in my code. Basically whatever link it is, the text color goes blue, and the link stays whatever it is.

So I added the code at the end of the header like this:

<head>
  </style>
    a:-webkit-any-link {
      text-decoration: none;
    }
  </style>
</head>

and problem is no more.

Solution 15 - Css

As others pointed out, it seems like you can't override nested text-decoration styles... BUT you can change the text-decoration-color.

As a hack, I changed the color to be transparent:

text-decoration-color: transparent;

Solution 16 - Css

Put the following HTML code before the <BODY> tag:

<STYLE>A {text-decoration: none;} </STYLE>

Solution 17 - Css

In my case, I had poorly formed HTML. The link was within a <u> tag, and not a <ul> tag.

Solution 18 - Css

set text-decoration: none; for anchor tag.

Example html.

<body>
    <ul class="nav-tabs">
        <li><a href="#"><i class="fas fa-th"></i>Business</a></li>
        <li><a href="#"><i class="fas fa-th"></i>Expertise</a></li>
        <li><a href="#"><i class="fas fa-th"></i>Quality</a></li>
    </ul>
</body>

Example CSS:

.nav-tabs li a{
  text-decoration: none;
}

Solution 19 - Css

Overriding Nested text-decoration styles.
Look for any ::before or ::after selectors and display none to any text-decoration, border-bottom, etc. or reset a property (unset) to any text color property like: text-decoration-color, background-color, etc.

.boxhead .otherPage {
color: #FFFFFF;
}
a.boxhead .otherPage:before {
background-color: unset;
}

a.boxhead .otherPage:before {
background-color: unset !important;
}

Solution 20 - Css

Here is an example for the asp.net webforms LinkButton control:

 <asp:LinkButton ID="lbmmr1" runat="server" ForeColor="Blue" />

Code behind:

 lbmmr1.Attributes.Add("style", "text-decoration: none;")

Content Type	Original Author	Original Content on Stackoverflow
Question	dmr	View Question on Stackoverflow
Solution 1 - Css	Davor Lucic	View Answer on Stackoverflow
Solution 2 - Css	JYelton	View Answer on Stackoverflow
Solution 3 - Css	Alex K.	View Answer on Stackoverflow
Solution 4 - Css	Nagarajan S R	View Answer on Stackoverflow
Solution 5 - Css	jeffmjack	View Answer on Stackoverflow
Solution 6 - Css	Santosh Khalse	View Answer on Stackoverflow
Solution 7 - Css	Joel Crawford-Smith	View Answer on Stackoverflow
Solution 8 - Css	artlung	View Answer on Stackoverflow
Solution 9 - Css	yarz-tech	View Answer on Stackoverflow
Solution 10 - Css	itzhar	View Answer on Stackoverflow
Solution 11 - Css	Md Abul Bashar	View Answer on Stackoverflow
Solution 12 - Css	MK Sandhu	View Answer on Stackoverflow
Solution 13 - Css	Deke	View Answer on Stackoverflow
Solution 14 - Css	Neo	View Answer on Stackoverflow
Solution 15 - Css	Ben	View Answer on Stackoverflow
Solution 16 - Css	qarly_blue	View Answer on Stackoverflow
Solution 17 - Css	mwilcox	View Answer on Stackoverflow
Solution 18 - Css	Rafiq	View Answer on Stackoverflow
Solution 19 - Css	Venteens Productions	View Answer on Stackoverflow
Solution 20 - Css	JoshYates1980	View Answer on Stackoverflow