1

Is it possible to refer to generated content in a HTML document with JavaScript?
For example, I have a figure in the document

body {
  counter-reset: figures 0;
}

figcaption::before {
  counter-increment: figures;
  content: "Figure " counter(figures);
}
<figure>
  <img src="https://placehold.it/222x77" alt="222x77">
  <figcaption id="greyish"></figcaption>
</figure>
<p>Here in <span>Figure 1</span>, we see a greyish square.</p>

and I want to use the exact caption of the figure in the text as well, how do I do that?

I wrote "Figure 1" hard-coded here in the snippet, but that's not flexible enough. What if this is not the first figure?
The getComputedStyle() of the pseudo-element also returns "Figure " counter(figures), so that's not much help. I want the literal text "Figure 1".

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
  • why not something like this: https://jsfiddle.net/gjvfLxhy/1/ ? – Temani Afif Feb 04 '20 at 20:12
  • No it is not possible. JS cannot access pseudo-elements as they are not in the DOM – Paulie_D Feb 04 '20 at 21:18
  • @Paulie_D well, we can access the content of pseudo element using JS but how to force the content to have the final computed value after resolving the counter seems to be the issue. – Temani Afif Feb 04 '20 at 21:24

0 Answers0