デモページはこちら

CSS疑似要素のcontentプロパティにjQueryで設定したカスタムデータ属性の値を指定します。以下の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はクラス名photoのfigureタグに疑似要素beforeを設定します。contentプロパティでattr(data-index);のようにカスタムデータ属性data-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;
	word-break: break-all;
	content: attr(data-index);
}

jQueryは変数photo_countに0をセットし、クラス名boxのdivタグの数だけカウントアップして処理します。変数photo_countが10未満の場合、クラス名photoのfigureタグにカスタムデータ属性data-index="01"からdata-index="09"を設定し、変数photo_countが10以上の場合、クラス名photoのfigureタグにカスタムデータ属性data-index="10"以上を設定します。

$(function() {
	var photo_count = 0;
	$('.box').each(function(){
		photo_count++;
		if(photo_count < 10){
			$(this).find('.photo').attr('data-index','0' + photo_count);
		}else{
			$(this).find('.photo').attr('data-index',photo_count);
		}
	});
});