How to make link not change color after visited?

HtmlCss

Html Problem Overview


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!

Html Solutions


Solution 1 - Html

Text decoration affects the underline, not the color.

To set the visited color to the same as the default, try:

a { 
    color: blue;
}

Or

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

Solution 2 - Html

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

Solution 3 - Html

Simply give it a css color

like :

a
{
 color:red;
}

Solution 4 - Html

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>

Solution 5 - Html

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>

Solution 6 - Html

Something like this should work:

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

Solution 7 - Html

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.

Solution 8 - Html

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.

Solution 9 - Html

(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>

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionGeekedOutView Question on Stackoverflow
Solution 1 - HtmlMatt StaufferView Answer on Stackoverflow
Solution 2 - HtmleversorView Answer on Stackoverflow
Solution 3 - HtmlRoyi NamirView Answer on Stackoverflow
Solution 4 - HtmlBlackHatView Answer on Stackoverflow
Solution 5 - HtmlanyView Answer on Stackoverflow
Solution 6 - HtmlJames JohnsonView Answer on Stackoverflow
Solution 7 - HtmlwiztrailView Answer on Stackoverflow
Solution 8 - HtmlMiDoView Answer on Stackoverflow
Solution 9 - HtmlTryThisView Answer on Stackoverflow