title: How can I read the applied CSS-counter value?
body: <p>Say you have a CSS 2.1 counter like</p>
  
  <pre><code>ol {
    counter-reset: section;
    list-style-type: none;
  }
  li:before {
    counter-increment: section;
    content: counters(section, ".") " ";
  }
  
  
  &lt;ol&gt;
    &lt;li&gt;itemA&lt;/li&gt;          &lt;!-- 1     --&gt;
    &lt;li&gt;itemB               &lt;!-- 2     --&gt;
      &lt;ol&gt;
        &lt;li&gt;itemC&lt;/li&gt;      &lt;!-- 2.1   --&gt;
        &lt;li id="foo"&gt;itemD&lt;/li&gt;      &lt;!-- 2.2   --&gt;
  </code></pre>
  
  <p>(see <a href="https://developer.mozilla.org/en/CSS_Counters" rel="noreferrer">https://developer.mozilla.org/en/CSS_Counters</a> "nesting counters")</p>
  
  <p>Is there a way to read/get the <code>:before.content</code> ("2.2" in this case) for <code>&lt;li id="foo"&gt;</code> in JavaScript?</p>
  
  <p>Edit: In my case a Mozilla-only solution would suffice. But there really seems to be no way to access this information. At least I didn't find any at <a href="https://developer.mozilla.org/en/CSS_Counters" rel="noreferrer">https://developer.mozilla.org/en/CSS_Counters</a> ff.</p>