How to prevent pseudo-element (:before or ::after) within a <a> tag from being clickable?

Question

Is there any way to prevent pseudo-element ::after or ::before one-link <a> become part of the link itself?

My idea was to use one ::after in a link tag <a>, that ::after would be used to replace content from within the link itself that until a certain moment I do not want to show the user, however I realized that this ::after becomes part of the link itself, only I don’t want that pseudo-element have link

In this example I put a text replacing the link name, the text inside the tag <a>, but this text remains clickable.

.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>

How to avoid this problem of ::after link become clickable?

Answer 1

You can use the pointer-events: none;

Behold:

.link {
  visibility: hidden;
  position: relative;
}
.link:after {
  visibility: visible;
  content: 'Texto visível';
  position: absolute;
  left: 0;
  top: 0;
  color: red;
  pointer-events: none;
}

<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>

The property causes the element to have no iteration with the mouse. I usually use in cases where I need, for example, to style a select with a custom arrow, but this arrow cannot be "clickable".

He’s like an equivalent to event.preventDefault() javascript.