How to prevent pseudo-element (before or after) inside a clickable tag?

Navigation
7

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

My idea was to use ::after in a <a> link tag, this ::after would be used to replace content from within the link itself that I do not want to show to the user, ::after becomes part of the link itself, but I do not want this pseudo-element to have a link

In this example I put a text overwriting the name of the link, the text that is inside the tag <a> , however 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 can I prevent this problem from the ::after of the link becoming clickable?

    
asked by anonymous 04.09.2018 / 20:17

1 answer

8

You can use pointer-events: none;

See: 

.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 not have iteration with the mouse. I usually use cases where I need to, for example, stylize a select with a custom set, but that little set can not be "clickable."

It's like an equivalent to event.preventDefault() of Javascript.

    
04.09.2018 / 20:24
Mail function and its limits Dictionary Search