text-decoration not working for visited state link

Asked 27/1, 2016 at 7:20 Answered 27/1, 2016 at 12:11

html css google-chrome firefox text-decorations

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>

Ticker answered 27/1, 2016 at 7:20 Comment(4)

I think it has something to do with: dbaron.org/mozilla/visited-privacy.. text-decoration is no option voor styling the 'visited-state'.. – Leuko 27/1, 2016 at 7:34

Weird, if so, why then the color is updated but not the text-decoration property? BTW are you netherlander? You've used 'voor' instead of 'for' :) – Ticker 27/1, 2016 at 12:6

Ha, yeah I'm Dutch.. I didn't read it thoroughly, but it seems there's just a few properties that can be uses on :visited state (color, border/outline etc.).. – Leuko 27/1, 2016 at 12:18

I've seen that privacy issue restrictions just a few mins ago and yes, text-decoration is out of the permitted style property list. – Ticker 27/1, 2016 at 12:21

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.

Ticker answered 27/1, 2016 at 12:11 Comment(1)

100% accurate, your answer could have saved me alot of time. :) A shame that Webkit and Firefox's CSS inspectors mark :visited properties [other then the ones you mentioned] as applied while it doesn't in this case. – Murdocca 25/5, 2018 at 14:47

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/

Panarabism answered 27/1, 2016 at 7:31 Comment(5)

Hi , you have put them in proper order , a:link { color:yellow; } a:visited { color:red; } a:hover { color:pink; } a:active { color:black; } – Kerns 27/1, 2016 at 7:33

I'm not searching for a jQuery answer, my point is to learn the pure htm/css solution. The question is tagged with html/css and this is a very basic, primitive property of CSS. – Ticker 27/1, 2016 at 7:56

@Srinivas R : Already visited comes after the link property ? – Ticker 27/1, 2016 at 7:57

@LeventDivilioglu In order to be effective , remember a:hover must come after a:link & a:visited in the CSS definition . it follow the love/hate principles .please go through this link #569768 – Kerns 27/1, 2016 at 8:50

@Srinivas R : Even I've got LV (which is partially proper), I've also added the Hover and Active states and it's still the same. – Ticker 27/1, 2016 at 10:17

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

Kerns answered 27/1, 2016 at 7:36 Comment(2)

This is not the case, the problem occurs for text-decoration property on visited state. – Ticker 27/1, 2016 at 10:17

text-decoration property did not work correct in visited code . which ignores the text-decoration property . pls go through this link bugzilla.mozilla.org/show_bug.cgi?id=645786 – Kerns 27/1, 2016 at 10:34

Demo #1

Demo #2 --Selector With Class

Recommended topics

Hot tags