CSSの順序付きリストの数字を装飾する方法について（疑似要素のカウンタを使わずに）

Question

ol li の数字の装飾ですが、
以下のURL先の方のように

https://www.granfairs.com/blog/staff/css-ol-styling-with-counter

li {
list-style: none;
}

としてスタイルをリセットし、
疑似要素でカウンタを使い、数字を装飾する方法が一般的かと思うのですが、

この方法だと、以下のように

<ol>
<li value="3">テキストテキスト</li>
<li>テキストテキスト</li>
<li>テキストテキスト</li>
<li>テキストテキスト</li>
</ol>

valueで開始数字を変えたい場合、
上記のような方法だと実装できません。。

この場合、なにか装飾できる方法ってありますでしょうか..??

教えていただけると幸いです。

※追記です。
AMPページでも使われる要素なので、JSは使えません。。

Answer 1

<ol data-val="3">
  <li>aaa</li>
  <li>bbb</li>
  <li>ccc</li>
</ol>

ol {
  list-style: none;
}
li::before {
  counter-increment: val;
  content: counter(val);
}
[data-val="3"] {
  counter-reset: val 2;
}
```**動くサンプル：**[https://jsfiddle.net/fb2s56kd/](https://jsfiddle.net/fb2s56kd/)

---

【counter-reset - CSS: カスケーディングスタイルシート | MDN】
[https://developer.mozilla.org/ja/docs/Web/CSS/counter-reset](https://developer.mozilla.org/ja/docs/Web/CSS/counter-reset)

Comments

[IGE]

ご回答ありがとうございます！実現できました！
同様に●番目から始めたいというリストが複数ある場合、やはり[data-val="●"]のスタイルは、事前にいくつも書いておかなければいけないでしょうか...??
と言いますのもAMP用のCSS容量がギリギリで正直これ以上記述を増やせません。。

[kei344]

状況がわかりませんが、指定の無いCSSが効くわけもないので必要な記述をする以外ないです。
そもそもCSSにこだわらずにHTMLで表現してしまえばよいのでは。

[IGE]

ご回答ありがとうございます。そうですね。。実はWPのリニューアル案件でして、既に<li value="3"></li>といったような記述が過去記事に無数にある状態です。。
ただデザインではリストの数字を装飾したいとのことで、なるべく編集が楽にすむような実装方法があれば、、と思っていました。
この度はありがとうございました。