Pseudo class on visited link

Question

Using only CSS, I'm trying to set a list of links to have a exclamation mark next to them if they are 'unvisited' links, and a check box next to them if they have been visited. The former works fine, but when the links have been visited, the tick box doesn't appear. My CSS is as follows:

.journey-table td a:link:before {   
    content: "\f071";
    font-family: FontAwesome;
    padding-right: 5px;
}
.journey-table td a:visited:before {    
    content: "\f14a";
    font-family: FontAwesome;
    padding-right: 5px;
}

Any help would be greatly appreciated.

http://stackoverflow.com/questions/12342516/combine-avisited-with-aafter-or-chaining-pseudo-classes-with-pseudo-elements — Michael Coker, Mar 16 '17 at 04:52

score 1 · Answer 1 · answered Mar 16 '17 at 10:25

1

According to this page, the styling of a :visited element, has been made very limited, for privacy reasons. Because of this, any child elements or pseudo elements of a visited link will be styled like an unvisited link.

answered Mar 16 '17 at 10:25

Connor

469
2
12

score 0 · Answer 2 · answered Mar 16 '17 at 10:12

0

I've created an example for you to understand

a:before {
  background-color: blue;
  content: "";
  display: block;
  height: 25px;
  width: 25px;
  float: left;
  margin-right: 10px;
}

a:hover:before {
  background-color: red;
}

<a href="#">this is a link</a>

answered Mar 16 '17 at 10:12

ani_css

2,118
3
30
73

Much appreciated. :) – woodson Mar 17 '17 at 01:36
Not at all,please check answer what you find useful – ani_css Mar 17 '17 at 06:24

Pseudo class on visited link

2 Answers2