CSSカウンターを使って変則的な番号付きリストを実装する

久しぶりにCSSカウンター便利だな、と実感したのでメモ。

CSSカウンターとはこういうものです：
CSS カウンターの使用 - 開発者ガイド | MDN

こんな感じの文書をWebページに掲載するときに（あくまで例ですがこういう構造）、

マークアップにはOL要素を使うのが妥当に思えます。
リストの通し番号より先にカッコ付きの文が出てくるので、CSSカウンターを使ってこんな感じでコーディングしました。

See the Pen
List with CSS counters by Yu Watanabe (@yuw27b)
on CodePen.

リストアイテムの先頭でなくても、任意の場所で通し番号を表示できるので便利です。
もちろんOL要素以外でも使えます。