CODEWITHSUNDEEP
javascriptcss
dysbulic
dysbulic

Reputation: 3105

Is it possible to access the content generated by a css :before rule?

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; }

Upvotes: 10

Views: 960

Answers (1)

cmptrgeekken
cmptrgeekken

Reputation: 8092

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.

Upvotes: 6

Related Questions