Why do most modern browsers (except Firefox) not support setting a CSS variable in a:visited?

This is not working in Chromium based browsers, Safari, etc.:

a:visited {
  --bg-color: red;
}

But all browsers support setting variables in a:hover:

a:hover {
  --bg-color: red;
}

Here's a demo: https://codepen.io/mamiu/pen/YzvXXqw

CodePudding user response：

Chrome disabled css for :visited unless its only for a color change.

Like so..

a { 
background-color: grey;
}

a:visited {
background-color: green;
}

CodePudding user response：

As pointed out by @Tybo this doesn't work for privacy reasons.

The solution is to simply chain CSS selectors and to change the CSS properties directly instead of using variables.

a:visited span.some-child-element {
  background-color: red;
}

I've also updated the demo: https://codepen.io/mamiu/pen/YzvXXqw