2

Suppose an input element has pseudo-element ::after at the end of that element, and after that there is a button, i.e. there is pseudo-element ::after between an input element and a button element. For example please look at the below picture-

enter image description here

In above example, when the button is clicked, after some time, the input is changed and the ::after pseudo-element gets vanished.

How can I detect that the input has ::after or not?

Mike
  • 269
  • 1
  • 8
  • I think it's not possible in javascript. You can try something like this if the pseudo element has a style associated with it. var color = window.getComputedStyle( document.querySelector('.element'), ':before' ).getPropertyValue('any_style_property_value'). If the value returned is undefined, it doesn't exist – Nithin Thampi Oct 02 '19 at 07:49

1 Answers1

3

You can use getComputedStyle(el, '::after').content to get the content of the ::after pseudo-element (it works for ::before as well). If the content is not the none, the pseudo-element exists.

const hasAfter = selector => {
  const el = document.querySelector(selector);
   
  return getComputedStyle(el, '::after').content !== 'none';
}


console.log(hasAfter('.has')); // true
console.log(hasAfter('.hasnt')); // false
.has::after {
  content: 'after';
}
<p class="has">has </p>

<p class="hasnt">hasn't</p>
Ori Drori
  • 183,571
  • 29
  • 224
  • 209
  • how can I modify ``document.addEventListener('click',function (event) { console.log(event.target.tagName); }, false);`` if I wnat to know the that the clicked elemnt has ``::after`` or not? – Mike Oct 02 '19 at 07:56
  • 1
    Replace `el` in my code with the `event.target` - `document.addEventListener('click',function (event) { console.log(getComputedStyle(event.target, '::after').content !== 'none'); }, false);` – Ori Drori Oct 02 '19 at 07:57
  • that ``::after`` has an attribute ``canFocus`` which is either true or false, this attribute gets value from server/internet, can I get the value of ``canFocus`` ? – Mike Oct 02 '19 at 08:22
  • @Mike - I'm not sure what you're asking. You should open a new question with the relevant code. – Ori Drori Oct 02 '19 at 09:41