CODEWITHSUNDEEP
htmlcss
woodson
woodson

Reputation: 63

Pseudo class on visited link

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.

Upvotes: 1

Views: 137

Answers (2)

Connor
Connor

Reputation: 469

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.

Upvotes: 1

ani_css
ani_css

Reputation: 2126

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>

Upvotes: 0

Related Questions