title: How to have JavaScript read a value appended with CSS at a given ID
body: <p>Before I get started on this abnormally weird question, lemme just say that I have never heard of the following hack being applied let alone conventionally discussed with any web programmers I know, and this is merely out of curiosity in the event that I'm wrong in my hypothesis that it cannot be done.</p>
  
  <p>That being said, here's my question:</p>
  
  <blockquote>
    <p><em>Using a customized CSS based off of the latest Bootswatch version (actually using Cerulean theme), is it possible to append text between hidden <strong>p</strong> tags <strong>AND</strong> have JavaScript read the value appended properly?</em></p>
  </blockquote>
  
  <p>Extra info: When hardcoding a value into the HTML, JavaScript has NO problem reading the value. When appending however (using <em>#element:after</em> for instance), JavaScript is passing a <em>null</em> value, I figure because the CSS loads after the JavaScript has already checked to see what value is at that particular element ID.</p>
  
  <p>Example Code:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="hiddenSecrets" style="display:none;"&gt;
  &lt;p id="valueOne"&gt;&lt;/p&gt;
  &lt;p id="valueTwo"&gt;&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#valueOne:after { content:"2048"; }
  </code></pre>
  
  <p>JavaScript reads the ID "valueOne" to be <em>null</em>.</p>
  
  <p>Any help is appreciated.</p>
  
  <p><em>Thanks!</em></p>
  
  <p>ADDENDUM: When debugging in Firefox using Firebug, the appended text displays in the Styles section, so the append itself works.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Hey so, here's the answer that seems to work with my environment...</p>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  var valueOne = document.getElementById('valueOne');
  var valueOne2 = window.getComputedStyle{valueOne, ':after').getPropertyValue('content').replace(/"/g, "");
  //...
  &lt;/script&gt;
  </code></pre>
  
  <p>However, I'm noticing now that this doesn't seem to work on mobile devices.</p>
  
  <p>I'll need to validate the JavaScript that I can't post further, but at least this answers the immediate issue, if only for desktop/laptop devices.</p>
  
  <p>Shoutout to @Blazemonger and @Mohamed Melouk for the help so far! :D</p>