CODEWITHSUNDEEP
javascripthtmlcsstext-decorations
mwilson
mwilson

Reputation: 12900

text-decoration on a tag not working

I am trying to remove all link styling from an <a> tag. I have tried all sorts of things and nothing is working. I can get the underlining to go away but visited links still remain a different color. The easy fix would be to just set the color of the text up front (and that works) but I don't want that. I reproduced the issue here: https://jsfiddle.net/qod4dz5x/

I am assuming it's got something to do with me having an <h2> tag within the <a> tag?

<a href="http://google.com"><h2>
Google
</h2></a>


a:link {
    text-decoration: none !important;
}

a:visited {
    text-decoration: none !important;
}

a:hover {
    text-decoration: none !important;
}

a:active {
    text-decoration: none !important;
}

What am I missing? Thanks for any helpful input.

Upvotes: 0

Views: 892

Answers (3)

Andrew Rubin
Andrew Rubin

Reputation: 220

The issue is with the pseudo-selectors :link, :active, etc. If you just set one general <a> tag set of properties as in the example below, and you will be set.

a {
  text-decoration: none;
  color: black;
}

One side note about text-decoration and color:

The text-decoration property does not affect text color. In my experience, the best solution to consistent color is to set your general tag style to include color: inherit;. This way, your tags will always be whatever color their parent element is.

Upvotes: 0

tkofh
tkofh

Reputation: 305

As mentioned above by Wowsk, text-decoration refers to the underline, not the color. You need a separate rule for that: 

a:visited {
    text-decoration: none;/*important is not necessary here or in any of the other psuedo selectors */
    color:black;/* or any color*/
}

alternatively, you can just set the color for the <a> tags which will override the psuedoselectors anyway: 

a {
    color:black;
    text-decoration:none;
}

Upvotes: 2

Sam Chahine
Sam Chahine

Reputation: 620

Everything seems to be working fine. You can set a color to the visited, being the same color as the original. I don't think there is another way to do this.

a:link {
    text-decoration: none;
    color:black;
}

a:visited {
    text-decoration: none;
    color:black;
}

a:hover {
    text-decoration: none;
}

a:active {
    text-decoration: none;
}

Upvotes: 1

Related Questions