<figure>
<img alt="" src="path/to/your/image.jpg" />
<figcaption>Here is the legend for your image</figcaption>
</figure>
- counter-reset which is used to initialize and reset one or several counters
- counter-increment which is used to increment one or several counters
- counter() is a valid value for ::before and ::after pseudo-elements, accepting a counter name as parameter in order to display its value
.article {counter-reset: figures;} /* Initialize counter */
.figure {counter-increment: figures;} /* Increment counter */
.figure figcaption:before {content: 'Fig. 'counter(figures) ' - ';} /* Display value of counter */
