CodePen Embed - Css counter figcaptions demo

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

This Pen is owned by Kinyanjui Wangonya on CodePen.

See more by @wang0nya on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.