contentプロパティで数字で順番を入れているのでコードが長くなってしまう

解決したいこと

contentプロパティを使用して数字を入れているのですが、
1.2.3.4...と変更するためにほとんど同じコードを書かないといけないのをきれいにしたい

現状のコード

.reserve_order_number { background-color:#f0f1ec; /* タイトル背景色 */ font-size: 16px;/* タイトル文字の大きさ */ font-weight: 800; color: #736f66; /* タイトル文字色 */ padding: 0 5px;/*タイトルの余白*/ line-height: 1;/*タイトルの行の高さ*/ position:absolute; /* 配置(ここを動かす) */ top: -48px; /* 適宜調整 */ left: -24px; /* 適宜調整 */ display: flex; align-items: center; } .reserve_order_number::before { content: "1"; width: 6em; height: 6em; line-height: 6; margin-right: .5em; border: 2px solid #736f66; border-radius: 50%; text-align: center; flex-shrink: 0; align-self: flex-start; }

<div class="reserve_order"> <div class="reserve_order_number">テストテスト</div> </div>

上記cssのcontentプロパティ以外は同じなのですが、
こちらを数字順にしたいと考えています。

こちらが理想なデザインです。

どなたか教えていただけますと幸いです。
よろしくお願いいたします。