【CSS】疑似要素による番号リストの連番を任意に飛ばす

　ol、liを用いた番号リストがあります。これの番号部のみを好きに作る方法に:beforeの疑似要素を用いるものがあります。

これは

ol.only-before {
  list-style-type: none;
}

　の様に元々の番号を消し、

ol.has-before {
  counter-reset:num;
}

ol.has-before li:before {
  counter-increment: num;
  content: counter(num);
  
  background: cyan;
  border-radius: 50%;
  display: inline-block;
  height: 1em;
  width: 1em;
  text-align: center;
}

の様にcounter-reset, counter-increment, contentで番号を制御、表示し、background以下で好きなように修飾する方法です。
　このように好きに番号リストの番号部のデザインを作れますが、面倒な部分もあります。それは疑似要素はDOMでないためJavaScriptで操りにくい点とli要素の度のcounter-increment: num;でしか値を増やせない点です。
　本来の番号リストは次の様にli要素の属性valueで番号を制御できます。:beforeの方は制御できていません。

　制御する方法の一つはCSSです。適宜リセットするstyleを定義します。この方法はCSSが膨れ上がるという問題点がありますが、一応対処が可能です。

　適宜インクリメント、デクリメントするのみの要素を定義する、ということもできます。これはこれでHTMLの要素数が無駄に増えます。また、抜け版を表すのには適していますが、任意に操りやすいとは言い難いです。

　両方を使えばそれぞれの欠点は多少補いあえます。
　もしデザインに最初から関われるのであれば、CSSで閉じている疑似要素を使うのでなく、本物の要素を扱った番号リストを作った方がよいでしょう。その方が後の変更が楽になります。Vue.jsなら簡単です。