I can read the line: before {content: '...'} via JavaScript (getComputedStyle), but this line behaves strangely

Question

I have a setup. I create a <div> , append the term "do" through the :before pseudo- getComputedStyle and read this value using getComputedStyle .

This works, I get the term (which in my case is "before") successfully, it is of type "string". (See Console Output.)

Comparison of this line with the given line returns the expected true , but only in Safari, CodePen and here, in the "Run a code fragment" -Environment!

It does NOT work in Chrome, Firefox or IE. A match comparison returns false .

What could be the reason?

Why doesn't this simple string comparison work?

The three corresponding code fragments are as follows:

 var content = window.getComputedStyle(document.querySelector('.pseudo'), '::before').getPropertyValue('content'); console.log('content: ' + content); // "before" console.log('typeof content: ' + typeof content); // string console.log(content == "before"); // false document.write(content == "before"); // false 

 div.pseudo:before { content: "before"; color: red; } 

 <div class="pseudo"> Div with pseudo :before content. </div> 

Answer 1

I found that different browsers relate to getPropertyValue for content differently. Some browsers return letter quotes in a string, others do not.

Here is the fiddle I used to test the behavior in different browsers. Results below:

  |  before |  "before"
 --------------------------------- + -------- + ------- -
 Chrome 42.0.2311.135 |  true |  false 
 Chrome Canary 44.0.2394.0 |  false |  true 
 Firefox 37.0.2 |  false |  true
 Firefox Developer Edition 39.0a2 |  false |  true
 Internet Explorer 11.09 |  false |  true
 Safari 8.0.5 |  true |  false
 Opera 29.0.1795.47 |  true |  false

Markup:

 <div class="pseudo">Div with pseudo :before content.</div> 

CSS:

 div.pseudo:before { content:'before'; color: red; } 

JS:

 var content = window.getComputedStyle(document.querySelector('.pseudo'), '::before').getPropertyValue('content'); console.log(content == "before"); console.log(content == '"before"'); 

Answer 2

Firefox has the text " , replace " with '' , i.e. delete them.

 var content = window.getComputedStyle(document.querySelector('.pseudo'), '::before').getPropertyValue('content'); console.log('content: ' + content); // "before" console.log('typeof content: ' + typeof content); // string console.log(content == "before"); // false document.write(content.replace(/"/g, '') == "before"); // true 

 div.pseudo:before { content: "before"; color: red; } 

 <div class="pseudo"> Div with pseudo :before content. </div> 

Answer 3

 var content = window.getComputedStyle(document.querySelector('.pseudo'), '::before').getPropertyValue('content'); console.log('content: ' + content); // "before" console.log('typeof content: ' + typeof content); // string console.log(content == "before"); // false document.write(content == "before"); // false 

 div.pseudo:before { content: "before"; color: red; } 

 <div class="pseudo"> Div with pseudo :before content. </div> 

Firefox: content == '"' + 'text' + '"' returns true
Chrome: content == text returns true
Opera: content == text returns true Safari: content == text returns true
IE: (I can't get it to work in IE)