Getting :before content and printing special characters from content

Question

I would like to get the content from my :before tag. I know some will say it's not a real (pseudo) element but there is a way in JS but can some one help me do it in JQ because I have multiple tags and I want to iterate with $.each...

Here is how I got the content in JS

window.getComputedStyle(document.querySelector('i'), ':before').getPropertyValue('content')

How can I do this in JQ?

Here is what I tried:

$.each($('div'),function(){
 $(this).find('i:before').css('content');
});

Print a special char?

When I get the content I would like to print it, the problem is it's a special character and I would like to get a real code.

My content has a code like this: \e002. So I would like to print it like that not .

Duplicate question: http://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin — Zach Buttram, Jul 08 '16 at 00:52
@ZachButtram It is not a duplicate because it doesn't show how to do it in JQ and also how do I print special characters ? — Maverick, Jul 08 '16 at 00:56
Within the `$.each()`, you could try `window.getComputedStyle(this, ':before').getPropertyValue('content')`. — Rick Hitchcock, Jul 08 '16 at 01:31
@RickHitchcock Thank you rick for the answer that solves a smaller problem, is there a way to print a special charterer code. So for example I want to print a code like `©` not `©`... I even tried `
` :D — Maverick, Jul 08 '16 at 09:46

score 2 · Accepted Answer · answered Jul 08 '16 at 12:17

Iterate $.each($('div i') instead of $.each($('div'), so you can avoid using find() within the iterator.

You can then use your window.getComputedStyle() code on this:

window.getComputedStyle(this, ':before').getPropertyValue('content')

You'll then be left with a Unicode string, which brings us to the second part of your question.

You can use charCodeAt() to view this string character by character, which gives the following for \e002:

34
57346
34

The 34s represent double-quotes, which you can ignore.

57346 is the decimal equivalent of hexadecimal e002. You can use toString(16) to convert it to hex.

All that's left is to prepend the \ in front.

So our code becomes:

$.each($('div i'),function() {
  var s = window.getComputedStyle(this, ':before').getPropertyValue('content'),
      char = '\\' + s.charCodeAt(1).toString(16);

  console.log(char);  // \e002
});

Snippet:

$.each($('div i'),function() {
  var s = window.getComputedStyle(this, ':before').getPropertyValue('content'),
      char = '\\' + s.charCodeAt(1).toString(16);
  
  console.log(char);  // \e002
});

i:before {
  content: '\e002';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <i>Our italic node</i>
</div>

That was the exact thing I was looking for.. Did not know about `charCodeAt` — Maverick, Jul 08 '16 at 12:39

Getting :before content and printing special characters from content

Print a special char?

1 Answers1