Result

CSSカウンターで加えた数字をグラデーションに、というもの
スクロールしても色が変わらず維持できます

だからどうしたと言われたらまぁ言い返す言葉も無いんですが

css

/* リストのスタイル*/
li {
  counter-increment: index;
  display: flex;
  align-items: center;
  padding: 12px 0;
  box-sizing: border-box;
}

/* カウンター表示 */
li::before {
  content: counters(index, ".", decimal-leading-zero);/*先頭に0を付けて桁数を一定にする*/
  text-align: right;
  font-weight: bold;
  min-width: 50px;
  padding-right: 12px;
  align-self: flex-start;
  background-image: linear-gradient(to bottom, red, blue);/*グラデーション*/
  background-attachment: fixed;
  -webkit-background-clip: text;/*テキスト部分をくり抜き*/
  -webkit-text-fill-color: transparent;/*透明にしてグラデーションが見えるようにする*/
}

html

<ul>
<li>hoge</li>
<li>piyo</li>
<li>foo bar</li>
</ul>

can i use

CSSカウンターのブラウザ対応状況です

via

CSS Gradient Counter List