デモページはこちら

CSS疑似要素のcontentプロパティに、CSSのcounter関数で連番を指定します。JavaScriptは使用せず、CSSのみで実装します。以下のhtml構造でテストします。デモページではクラス名boxのdivタグは12個並べています。

<div class="container">
	<div class="box">
		<figure class="photo">
			<img src="images/photo01.jpg" alt="">
		</figure>
		<h3>タイトル01</h3>
		<p>ダミーテキストダミーテキストダミーテキスト</p>
	</div>
	<div class="box">
		<figure class="photo">
			<img src="images/photo02.jpg" alt="">
		</figure>
		<h3>タイトル02<br>タイトル02</h3>
		<p>ダミーテキストダミーテキストダミーテキスト</p>
	</div>
	<div class="box">
		<figure class="photo">
			<img src="images/photo03.jpg" alt="">
		</figure>
		<h3>タイトル03<br>タイトル03<br>タイトル03</h3>
		<p>ダミーテキスト</p>
	</div>
</div>

CSSはまずクラス名boxのdivタグにcounter-incrementプロパティでカウンタ名を設定します。このカウンタ名は同階層の対象の要素の数分だけ連番でインクリメントされます。
次にクラス名photoのfigureタグに疑似要素beforeを設定し、contentプロパティでcounter(index, decimal-leading-zero)'.';のようにcounter関数を指定します。counter関数の第一引数はカウンタ名、第二引数は表示形式です。表示形式のdecimal-leading-zeroは先頭に0を付けた数字です。
counter関数には文字列が結合できます。今回は数字の後に'.'を結合しています。

.box {
	counter-increment: index;
}
.photo {
	position: relative;
}
.photo:before {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: 'Patua One', cursive;
	font-size: 2rem;
	font-weight: 400;
	color: #fff;
	content: counter(index, decimal-leading-zero)'.';
}

注意点として今回のhtml構造の場合、counter-incrementプロパティはクラス名boxのdivタグに設定する必要があります。クラス名photoのfigureタグ、またはその疑似要素beforeにcounter-incrementプロパティを設定しても、カウンタ名に連番が格納できません。同階層に対象の要素が1つしかないため、カウンタ名に格納される数値は全て1（表示は01）になります。