I wanted to change the text of visited links on payformystay.com, using CSS. In the offer summary, I wanted to change the link text “Check it out!” with “Check it out again!” after the user had indeed checked out the offer.

A payformystay.com offer

An example of a payformystay.com offer where I'd want to replace the 'Check it out!' link text.

I thought I could use something as simple as:

<a href="/offer/34234-title">
  <span class="unvisited-label">Check it out!</span>
  <span class="visited-label">Check it out again!</span>
</a>

together with…

a:link span.visited-label,
a:visited span.unvisited-label {
 :;
}
 
a:link span.unvisited-label,
a:visited span.visited-label {
 :;
}

Or, even simpler:

a:visited {
 : 'Check it out again!';
}

However, I bumped into a glass wall while trying to get this to work. Apparently, browser manufacturers have been removing features to increase security. The problem, apparently, is that as a third party you could find out if somebody has been visiting a particular URL by linking to, styling :visited links and then querying the computed styles of the link. To avoid this, getComputedStyle() in the major browsers now lies and most style rules are ignored within rules applied to the :visited pseudo-class.

I’m still considering a work-around with JavaScript (setting a visited class) on the anchors, because I hate to let a good darling die.