擬似要素のcontent内に記載する数字を増やして表示したい

実現したいこと

・擬似要素contentに記載する数字を増やしたい

前提

現在サイトのコーディングを行なっています。フロントエンドの中でjavascriptの知識が足りず勉強中のため、
お力お借りさせていただけないかと思い質問させていただきます。
添付写真のように数字を01→02→03と増やして表示したいのですが、javascriptを使用してこのように表示することは可能なのでしょうか。
もし可能であれば、方法をご教示いただきたく存じます。
宜しくお願いいたします。

該当のソースコード

html
1                <div class="service__dx__service-flow">
2                    <div class="service__dx__service-flow__wrap">
3                        <h4>
4                            テキスト
5                        </h4>
6                        <p>
7                            テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります
8                        テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります
9                        </p>
10                    </div>
11                </div>
12                <div class="service__dx__service-flow__arrow">
13                    <img src="<?php echo get_template_directory_uri();?>/images/dx_appli_arrow.png">
14                </div>
15                <div class="service__dx__service-flow numver">
16                    <div class="service__dx__service-flow__wrap">
17                        <h4>
18                            テキスト
19                        </h4>
20                        <p>
21                            テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります
22                        テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります
23                        </p>
24                    </div>
25                </div>
26                <div class="service__dx__service-flow__arrow">
27                    <img src="<?php echo get_template_directory_uri();?>/images/dx_appli_arrow.png">
28                </div>
29                <div class="service__dx__service-flow">
30                    <div class="service__dx__service-flow__wrap">
31                        <h4>
32                            テキスト
33                        </h4>
34                        <p>
35                            テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります
36                        テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります
37                        </p>
38                    </div>
39                </div>

css
1.service__dx__service-flow{
2  position: relative;
3  padding: 24px 0;
4  text-align: right;
5  background-color: #fff;
6  border-radius: 10px;
7  box-shadow: 0px 0px 12px 6px rgba(0, 0, 0, 5%);
8}
9
10.service__dx__service-flow::before {
11  content: "";
12  position: absolute;
13  width: 100px;
14  height: 100px;
15  top: 0;
16  left: 0;
17  border-radius: 10px 0 0 0;
18  background: orange; 
19  clip-path: polygon(0% 0%, 0% 100%, 100% 0%);
20  box-shadow: 0px 0px 12px 6px rgba(0, 0, 0, 5%);
21  z-index: 100;
22}
23
24.service__dx__service-flow::after {
25  content: "01";
26  display: block;
27  position: absolute;
28  top: 0;
29  left: 3px;
30  color: #fff;
31  font-size: 4rem;
32  z-index: 101;
33}
34
35.service__dx__service-flow__wrap{
36  width: 80%;
37  margin-left: 15%;
38  text-align: left;
39}
40
41.service__dx__service-flow__wrap h4{
42  font-size: 2rem;
43  margin-bottom: 5px;
44}
45
46.service__dx__service-flow__arrow{
47  width: 10%;
48  margin: 0 auto;
49}