Existe alguma forma de evitar que o pseudo-elemento ::after
ou ::before
de um link <a>
se torne parte do próprio link?
Minha ideia era usar um ::after
em uma tag de link <a>
, esse ::after
seria usado para substituir o conteúdo de dentro do próprio link que até certo momento não quero mostrar ao usuário, porém percebi que esse ::after
se torna parte do próprio link, só que eu não quero que esse pseudo-elemento tenha link
Nesse exemplo eu coloquei um texto substituindo o nome do link, o texto que está dentro ta tag <a>
, porém esse texto continua clicável.
.link {
visibility: hidden;
position: relative;
}
.link:after {
visibility: visible;
content: 'Texto visível';
position: absolute;
left: 0;
top: 0;
}
<a href="www.google.com" class="link">google</a>
<a href="www.yahoo.com" class="link">yahoo</a>
<a href="www.terra.com">link real</a>
<a href="www.uol.com" class="link">uol</a>
Como evitar esse problema do ::after
do link se tornar clicável?