jQuery: how to select all elements that are pseudo-elements having :before or :after?

Question

in jQuery or basic javascript is posible to get all elements with :after or :before pseudo-element?

I know getcomputedstyle, but this return all elements with or without :before or :after pseudo-element.

Thanks

EDIT:

Something like:

$("a:before").each(function () {
  console.log("element with :before pseudo-element")
}); 

Answer 1

Nope. Generated content elements are not really part of the DOM. You can't directly hook into them using JS. They are for presentation only.

You can do things to actual elements that may be parents or siblings etc. of the pseudo-elements and change them that way.

Looking at the question BoltClock linked to below, maybe you could set a common attribute to all pseudo-elements and then try and select them with jquery based on this attribute.

Answer 2

给'a'标签你想要选择一个类'has-before'并以这种方式挂钩它们？

Answer 3

It is possible but in a round-about way!

Check this demo: http://jsfiddle.net/BE47z/1/

The logic goes like:

1. Enumerate all classes that have a :before or an :after definition in CSS - this is done by traversing the document.styleSheets object ( you can change the code to only catch :before or :after etc.. as needed )
2. Once you get the class list, remove the part after : its name in CSS, for ex: .a:before becomes .a
3. Now you can get all elements matching those classes

Code

HTML

<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>

CSS

.classWithoutBefore {

}

.class2WithoutBefore {

}

.classWithBefore:before {

}

.class2WithBefore:before {

}

.a:before, .b:before {

}

JS

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(':before') != -1 || rules[j].selectorText.indexOf(':after') != -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));
        }
    }
}

// Elements with the classes in the 'classes' array have a :before or :after defined