[html] How to make link not change color after visited?

I have this css:

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

After a link is visited it changes color.

It is happening to the "Browse All Problems" link on the bottom of the right side of this page: http://www.problemio.com

Thanks!

This question is related to html css

The answer is


For application on all the anchor tags, use

CSS

a:visited{
    color:blue;
}

For application on only some of the anchor tags, use

CSS

.linkcolor a:visited{
    color:blue;
}

HTML

<span class="linkcolor"><a href="http://stackoverflow.com/" target="_blank">Go to Home</a></span>

Simply give it a css color

like :

a
{
 color:red;
}

In order to avoid duplicate code, I recommend you to define the color once, for both states:

a, a:visited{
     color: /* some color */;
}

This, indeeed, will mantain your <a> color (whatever this color is) even when the link has been visited.

Notice that, if the color of the element inside of the <a> is being inherited (e.g. the color is set in the body), you could do the following trick:

a, a:visited {
    color: inherit;
}

you can use a diferent class:

like

.clase
{
text-decoration-color: none;
color: #682864;
text-decoration: none;

}
.clase2:hover
{
color: white;
text-decoration: none;
}

 <a href="#" class="clase2 clase"> link que no tiene subrayado ni color standar</a>

Something like this should work:

a, a:visited { 
    color:red; text-decoration:none; 
    }

a:visited
{
color: #881033;
}

(or whatever color you want it to be)

text-decoration is for underlining(overlining etc. decoration ist not a valid css rule.


If you want to set to a new color or prevent the change of the color of a specific link after visiting it, add inside the tag of that link:

<a style="text-decoration:none; color:#ff0000;" href="link.html">test link</a>

Above the color is #ff0000 but you can make it anything you'd like.


(Header CSS:)

<style>

a  {   
   color: #ccc;   /* original colour state*/
}

a:active {
   color: #F66;  
}


a[tabindex]:focus {
    color: #F66;
    outline: none;
}

</style>


(Body HTML:)

<a href="javascript:;" style="font-size:36px; text-decoration:none;"  tabindex="1">click me &#9829;</a>