Remove stubborn underline from link
Remove stubborn 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?
Accepted Answer
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;
}
Read more... Read less...
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.
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)
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;
}
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;
}
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
