dmr dmr - 2 months ago 11
CSS Question

Remove stubborn underline from link

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.

The HTML:

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


The CSS:

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


How can I remove the blue underline from the link?

Answer

As I expected, 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;
}