I'm new on CSS and trying to understand how links are modified due to the changed state. On my scenario, I want to change the text-decoration to the line-through when the link is on visited state. However, neither on Mozilla nor Chrome browser, text-decoration of the text content not updated with line-through when the link is on visited state, shown as below. Where did I go wrong?

Please notify that the color is updated (to green) when the link state changed to visited while the text-decoration stays the same (see. Demo #1);

Note: There is a bug report for the Mozilla about the same issue: Mozilla Bug #645786 and on the bug report. Problem also reproduce for the tag.class:state selector (a.:visited) (see Demo #2)

Demo #1

<!DOCTYPE html>
<html>
    <head>
        <style>
            a:link {
                color: red;
                text-decoration: none;
            }

            a:visited {
                color: green;
                text-decoration: line-through;
            }

            a:hover {
                color: blue;
            }

            a:active {
                color: yellow;
            }
        </style>
    </head>
    <body>
        <p>
            <b>
                <a href="http://google.com" target="_blank">This is a link</a>
            </b>
        </p>
    </body>
</html>

Demo #2 --Selector With Class

<!DOCTYPE html>
<html>
    <head>
        <style>
            a.linkClass:link {
                color: red;
                text-decoration: none;
            }

            a.linkClass:visited {
                color: green;
                text-decoration: line-through;
            }

            a.linkClass:hover {
				color: blue;
            }

            a.linkClass:active {
				color: yellow;
            }
        </style>
	</head>
    <body>
        <p>
            <b>
                <a class="linkClass" href="http://google.com" target="_blank">This is a link</a>
            </b>
        </p>
    </body>
</html>

There is a limitation for styling the visited links;

Limits to visited link styles

You will still be able to visually style visited links, but there are now limits on what styles you can use. Only the following properties can be applied to visited links:
color
background-color
border-color (and its sub-properties)
outline-color
The color parts of the fill and stroke properties

Privacy and the :visited selector

text-decoration styling is not permitted due to the user's privacy issues.

You can done with this jquery addClass.

Demo code

$('a').click(function(){
    $(this).addClass('visited');
});

CSS

.visited {
  color: green;
  text-decoration: line-through;
}

fiddle demo: https://jsfiddle.net/nikhilvkd/7y2fyytw/

 <a href="http://www.google.com" target="_blank">google</a>
<style>
a:link             
 {  
color:red;
 }
a:visited    
    { color:yellow;
}
a:hover     
      { color:blue; }
a:active            { color:orange; }
</style>

来源：https://stackoverflow.com/questions/35031032/text-decoration-not-working-for-visited-state-link

标签

html