How to Determine if ::before is applied to an element?

by

Use getComputedStyle and check the value of content. If it’s none then the pseudo element isn’t defined:

var elem = document.querySelector(".box");
var c = window.getComputedStyle(elem,"before").getPropertyValue("content");
console.log(c);

var elem = document.querySelector(".alt");
var c = window.getComputedStyle(elem,"before").getPropertyValue("content");
console.log(c);
.box:before {
  content:"I am defined"
}
<div class="box"></div>

<div class="alt"></div>

This property is used with the :before and :after pseudo-elements to generate content in a document. Values have the following meanings:

none

The pseudo-element is not generated. ref

If you want to count simply consider a filter:

const elems = document.querySelectorAll('div');
const divs = [...elems].filter(e => {
   var c = window.getComputedStyle(e,"before").getPropertyValue("content");
  return c != "none"
});

console.log(divs.length)
.box:before {
  content:"I am defined"
}
<div class="box"></div>
<div class="box alt"></div>

<div class="alt"></div>
<div ></div>

More Related Contents:

  1. How to display an chage photo option on mouse hover similar to linkedin using Javascript? [closed]
  2. Input type="text" with select functionality after clicking on Input type="text"
  3. How to dectect objects' overlaping situations in javascirpt? [closed]
  4. jQuery .animate function not responding properly
  5. How to force browser to show image 3 inches wide?
  6. Reloading a single div in an html page [closed]
  7. How to invoke animation when redirection in jsf?
  8. fixing slider on my website [closed]
  9. Only detect click event on pseudo-element
  10. Can I use HTML tags in the options for select elements? [duplicate]
  11. Select all elements that have a specific CSS, using jQuery
  12. How to build simple jQuery image slider with sliding or opacity effect?
  13. How can I disable a browser or element scrollbar, but still allow scrolling with wheel or arrow keys?
  14. Hide scrollbar while still being able to scroll with mouse/keyboard [duplicate]
  15. Border Radius for IE8
  16. make html text input field grow as I type?
  17. jQuery Drag/Resize with CSS Transform Scale
  18. Creating a select box with a search option
  19. Can you have a JavaScript hook trigger after a DOM element’s style object changes?
  20. Bootstrap modal: background jumps to top on toggle
  21. How to define the css :hover state in a jQuery selector?
  22. jQuery in Chrome returns “block” instead of “inline”
  23. How To Include CSS and jQuery in my WordPress plugin?
  24. Detect browser wrapped lines via javascript
  25. Extracting text from a contentEditable div
  26. Prevent iOS bounce without disabling scroll ability
  27. How do I make an area unclickable with CSS?
  28. How can I dynamically highlight strings on a web page?
  29. Wrapping lists into columns
  30. Possible to reverse a css animation on class removal?

Leave a Comment