Получение CSS сгенерированного контента

Question

Можно ли ссылаться на сгенерированный контент в документе HTML с JavaScript?
Например, у меня есть фигура в документе

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>

, и я хочу использовать точный заголовок цифры в тексте, как мне это сделать?

Я написал " Рисунок 1 "жестко запрограммирован здесь во фрагменте, но он недостаточно гибок. Что если это не первая цифра?
getComputedStyle() псевдоэлемента также возвращает "Figure " counter(figures), так что это не сильно поможет. Я хочу буквальный текст "Рисунок 1".