[css] Remove stubborn underline from link


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.


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.


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

The CSS:

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

How can I remove the blue underline from the link?

Just add this attribute to your anchor tag



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

Or use the CSS way.

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

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.

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;

Just use the property


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