Remove blue underline from link

Question

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?

Solution 1

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

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

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

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

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;
}

View more solutions

Comments

[Davor Lucic]

Well it should go away when you do text-decoration:none. Are you sure you are appling this to the right element? Can you provide example code?

[shuttle87]

Where is text-decoration: none being used?

[artlung]

I think you mean a:link when you say a:click

[JMTyler]

But what if you have text surrounding the span as well, and you want the surrounding text to have the link underline, but the text within the span to have none?

[Davor Lucic]

@JMTyler you can't have partial underlines like that, but I guess you could apply border on text inside of span.

[JMTyler]

Would it make a difference if it is a div? And how exactly would applying a border cause the underline to appear gone?

[Tony Topper]

@rebus, You can't? Why not? Cause in at least IE7+ and FireFox 4+ you can, but not in Chrome for some reason. Here's the code I got to work in the non-Chrome browsers I tested: .toc-list a > span{text-decoration:none !important;} I think @JMTyler's question is legitimate; I am searching for the same solution.

[Aysennoussi]

Twitter did the same with the message page you can see that the name has underline but not the tag

[Doresoom]

This should be the actual accepted answer, as I was having the same problem AFTER clicking on my button link. The visited property was still changing to purple when I came back to the page.

[Partly Cloudy]

It appears text-decoration doesn't support overriding on nested tags, as hinted above. Once you have an a { text-decoration: underline; } rule applied you cannot de-apply it eg with a .wish_this_were_not_underlined { text-decoration: none; }. I can't find a reference for this but that's my experience (in Chrome).

[Bhargav]

This one should be the answer.. Sometimes, box shadow gives an underline affect.

[Ryan Burbidge]

Like others above I was not able to de-underline the text by applying text-decoration: none; so instead we chose to hide the line using text-decoration: underline; text-decoration-color: white;. /hack

[agentofuser]

Setting border-bottom-style: none; fixed it for me.

[Magnus Bull]

Better yet, try .hidden-underline { text-decoration-color: #00000000; } to set the underline color to transparent (0 alpha). Mind, it is not widely supported as of today (Edge, looking at you).

[Asuquo12]

make sure its on the anchor tag and inline could be better since you might want the underline on other links.

[Patrick Denny]

if you're only trying to remove the underline from an element inside an anchor, and not the entire anchor. you need to make the inner element an inline-block like so: .boxhead .otherPage { display: inline-block; color: #FFFFFF; text-decoration: none; }

[Ajowi]

It is an answer, but not the best. The scope of those are global and not specific. Something like this should do the trick: .otherPage a:link {text-decoration:none;}; repeat that for visited, active and hover if needed.

[snarf]

developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-col‌​or