<body>
  <figure>
    <img src="https://i.pravatar.cc/150
" />
    <figcaption></figcaption>
  </figure>
  <figure>
    <img src="https://i.pravatar.cc/150
" />
    <figcaption></figcaption>
  </figure>
  <figure>
    <img src="https://i.pravatar.cc/150
" />
    <figcaption></figcaption>
  </figure>
</body>
/* initialize the counter */
body {
	counter-reset: imgCounter;
}

/* increment the counter anywhere there's a figcaption */
figcaption {
	counter-increment: imgCounter;
}

/* display the value of the counter before the element */
figcaption:before {
	content: 'figure ' counter(imgCounter);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.