Você não pode alterar a propriedade display:
com a pseudo-classe :visited
por questões de privacidade do usuário, e não existe solução alternativa para isso.
Apenas as seguintes propriedades são permitidas no :visited
:
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:
e text-emphasis-color:
.
Em SVG existem mais duas que são permitidas, fill:
e stroke:
.
Embora essas propriedades com o :visited
possam alterar a aparência das cores para o usuário, a função window.getComputedStyle()
não irá obter os valores alterados por :visited
e sempre retornará o valor da cor não visitada.
Note que :visited
só pode ser aplicado aos elementos <a>
e <area>
, o elemento <link>
não suporta :visited
.
Toda essa questão está ligada a privacidade do usuário, pois se fosse possível estilizar qualquer link poderia através do window.getComputedStyle()
ou Element.matches()
detectar qualquer link o usuário visitou e rastreá-lo, e o link nem precisaria existir na página atual, poderia ser adicionado dinamicamente, testando um range gigante de links, e ninguém quer ser rastreado sem consentimento.
Para mais detalhes e aprender o básico e avançado de CSS recomendo sempre pesquisar primeiro na documentação da MDN, segue os links relacionados:
Nota: essa questão de privacidade começou a ser implementada em 2010 em todos navegadores, o que impactou muitos desenvolvedores, não só para rastreamento, mas para simples estilização e identificação do usuário final.