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?


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

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)

链接地址: http://www.djcxy.com/p/12950.html

上一篇: Textview链接没有变化?

下一篇: 从链接中删除顽固的下划线