Question

I’m experimenting with using html5 and css counters to number the figures in a document. The figure numbering css is working, but I need to be able to generate cross reference that include the figure numbers.

Is there any way to access those values via javascript? The counter code I am using is:

body { counter-reset: section; }
section { counter-reset: figure;
          counter-increment: section; }
section section { counter-reset: section; }
section > h1:before { content: counters(section, '.'); }
.figure > .caption:before {
  counter-increment: figure;
  content: 'Figure ' counters(section, '.') '-' counter(figure); }
section > h1:before, .figure > .caption:before { margin-right: .5em; }

Answer 1

According to this article:

Generated content does not alter the
document tree. In particular, it is
not fed back to the document language
processor (e.g., for reparsing).

In other words, it appears as if the content CSS attribute merely adds text “styling” to the page, without affecting the document structure. The DOM is not aware of this styling and thus, Javascript cannot access it.