I already asked the question How to detect with CSS selector if icon inserted with ::before is displayed?
And it got closed as duplicate of this one:
How to Determine if ::before is applied to an element?
but that is not quite what I was looking for.
The thing is that this only gets me to access the value of before pseudo element that is present on the element with the class shopping-cart:
var elem = document.querySelector(".shopping-cart");
var c = window.getComputedStyle(elem,"before").getPropertyValue("content");
console.log(c);
The above code always returns the value for c no matter if it is applied on it or not.
I get the value for c in case I have (which I expected to be like that):
<i class="shopping-cart"> ::before </i>
But I also get the same value for c in case I have (which I didn't expect to be like that - in this case I would expect the c to have value: none):
<i class="shopping-cart"></i>
Can someone share some thoughts on this?
My end goal is to calculate if shopping cart icon is displayed on the page or not.
And the only thing indicating it is this:
it is displayed when I have in the DOM:
<i class="shopping-cart"> ::before </i>
And it is not displayed on the page when I have in the DOM:
<i class="shopping-cart"></i>
Sorry for me still not getting it :(
