JSFiddle - React, Tailwind, and code Playground
HTML
<div class="top">
<input type="button" value="Find elements with :before" onclick="findThem()">
<input type="button" value="Reset" onclick="resetThem()">
</div>
<div class="element classWithoutBefore">No :before</div>
<div class="element classWithBefore">Has :before</div>
<div class="element class2WithBefore">Has :before</div>
<div class="element class2WithoutBefore">No :before</div>
<div class="result">Results</div>
CSS
.classWithoutBefore {
}
.class2WithoutBefore {
}
.classWithBefore:before {
}
.class2WithBefore:before {
}
.a:before, .b:before {
}
body {
padding: 20px;
}
.element {
float: left;
width: 100px;
border: 1px solid #888;
margin-right: 15px;
padding: 6px;
}
.hasPseudo {
background-color: #7f7;
}
.top, .result {
clear: both;
float: none;
background-color: #ddd;
padding: 10px;
margin: 20px 0;
width: 80%;
display: inline-block;
}
JavaScript
function findThem() {
var sheets = document.styleSheets;
var pseudoClasses = [], i = 0, j = 0;
for (i=0; i<sheets.length; i++) {
try {
var rules = sheets[i].cssRules;
for (j=0; j<rules.length; j++) {
if(rules[j].selectorText.indexOf(':') != -1) {
pseudoClasses.push(rules[j].selectorText);
}
}
}
catch(ex) { // will throw security exception for style sheets loaded from external domains
}
}
var classes = [];
if(pseudoClasses.length > 0) {
pseudoClasses = pseudoClasses.join(',').split(','); // quick & dirty way to seperate individual class names
for (i=0; i<pseudoClasses.length; i++) { // remove all class names without a : in it
var colonPos = pseudoClasses[i].indexOf(':');
if(colonPos != -1) {
classes.push(pseudoClasses[i].substring(0, colonPos));
}
}
}
$('.result').append('Elements with the following classes have a pseudo:<br>');
$('.result').append('<b>' + classes.join('<br>') + '</b>');
$(classes.join(', ')).addClass('hasPseudo');
}
function resetThem() {
$('div').removeClass('hasPseudo');
}