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





