:visited 擬似クラスでアイコン画像の色を変えたい

仕様

:visited - CSS: カスケーディングスタイルシート | MDN

プライバシー上の理由から、ブラウザ―はこの擬似クラスを使って適用できるスタイルに厳しい制限をかけています。使い方は以下の通りです。

利用できる CSS プロパティは、 color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, column-rule-color, outline-color, text-decoration-color, text-emphasis-color です。 利用できる SVG 属性は fill と stroke です。

はい。知りませんでした。

問題

訪問済みリンク、つまり :visited 擬似クラスが有効な場合にテキストカラーとその横に配置した アイコンの色 を変更したかった。
ただし background-image の変更が無視されるためアイコンだけ通常の色で表示されてしまうというバグに遭遇した。

a::after {
  background-image: '/assets/images/ic_link.png';
}

a:visited::after {
  // 動かない
  background-image: '/assets/images/ic_link_visited.png';
}

回避方法

幸いにも今回やりたかったのはアイコン画像の色が変わればよかったため、SVG にして直接 HTML に埋め込み色を直に変更するという手法で回避した。
(だいぶ気持ち悪いのでいいやり方があれば知りたい)

g {
  stroke: blue;
  fill: blue;
}
g:visited {
  stroke: purple;
  fill: purple;
}

単色なら stroke や fill の変更をまとめてやるだけで足りるが、複雑に色が変わる場合はかなり根気のいる指定になるので注意