<!DOCTYPE html>
<style>
@keyframes test {
  from {
    background-color: rgba(0, 128, 0, 0.5);
    border-color: green;
    color: green;
    fill: rgba(0, 128, 0, 0.5);
    outline-color: green;
    stroke: green;
    text-decoration-color: green;
  }
}
a {
  animation-name: test;
  animation-delay: 1e10s;
  animation-duration: 1s;
  animation-fill-mode: both;
  border: solid;
  outline: solid;

  background-color: rgba(128, 0, 0, 0.5);
  border-color: red;
  color: red;
  fill: rgba(128, 0, 0, 0.5);
  outline-color: red;
  stroke: red;
  text-decoration-color: red;
}
</style>

<a id="visited" href="">
  This should be completely green.
  <svg width="14" height="14">
    <rect x="2" y="2" width="10" height="10" stroke-width="4"></rect>
  </svg>
</a>
<br>
<br>
<a id="unvisited" href="#">
  This should also be completely green.
  <svg width="14" height="14">
    <rect x="2" y="2" width="10" height="10" stroke-width="4"></rect>
  </svg>
</a>