Accessing the style property "content" on a :before pseudo selector

Question

I have about 250 font icons on a page and I would like to programmatically extract the Unicode values for each icon.

A typical icon has corresponding CSS like this:

.icon-play:before {
    content: "\f04b";
}

What I've tried so far...

document.querySelectorAll('[class^=icon-]') to access the icons (call each one i for now). i.style to try to access the style object. The problem is that the i.style.content value is empty.

I've also tried to access the content this way document.querySelectorAll('[class^=icon-]:before') but this produces an empty result.

Any help is appreciated. Thanks.

possible duplicate of [Manipulating CSS :before and :after pseudo-elements using jQuery](http://stackoverflow.com/questions/5041494/manipulating-css-before-and-after-pseudo-elements-using-jquery) — cimmanon, Apr 24 '13 at 15:31
The "duplicate" is clearly asking about manipulating CSS. This question is asking about reading CSS. They may have the same answers, but two distinct questions nonetheless. — Rick Viscomi, Apr 24 '13 at 15:33
I believe that psuedo-elements (`:hover`, `:before` etc), since they do not actually exist in the DOM, cannot be selected using normal selector queries. I believe that the only way to achieve what you are trying is to access it from reading the stylesheet itself, not the rendered page. Here's an answer explaining how you can go about that: http://stackoverflow.com/a/5830517/188221 — DigTheDoug, Apr 24 '13 at 16:19

score 1 · Accepted Answer · answered Mar 08 '14 at 01:28

Here you go:

var is = document.querySelectorAll('[class^=icon-]');
[].forEach.call(is, function (i) {
    console.log(
        window.getComputedStyle(i, ':before').content.slice(1, -1) // Strip off surrounding quotes
    );
});

JSFiddle (with some added complexity in order to display the results visually)

As far as extracting the Unicode values, you didn't specify your desired format (unless you just meant grabbing the string contents), but if you need the code points, you can apply charCodeAt() to each character of the string above to find out their code points and do with them as you wish.

Accessing the style property "content" on a :before pseudo selector

1 Answers1