ol, liタグと疑似要素だけで垂直ステップデザインを作る

Wordpressのテーマはおしゃれなものが多いですよね。
このサイトはGatsby.jsを使って自作しているんですが、デザインでもSEOでもなかなか勝てません。
その中でも、作業工程などを説明する際に便利なstep1, step2...と垂直方向に表示されるアレ。憧れます。
これ↓です。
first step
first content
second step
second content
third step
third content
なので今回は、できる限りタグを少なく、簡単に垂直ステップデザインを実装する方法を紹介します。
プロダクト
See the Pen oredered list with step by Ribbit (@local-bias) on CodePen.
解説
counter-resetについて
CSSでも変数のカウントアップのようなことができるみたいです、今回の実装で初めて知りました。
/** カウンターを定義 */
counter-reset: num;
/** カウンターを表示 */
counter(num);
/** カウントアップ */
counter-increment: num;
list-style-type: none;
で標準のカウンターを無効化した上で、独自のカウンターを作成しています。
疑似要素の改行
タグ数を増やしたくなかったので、疑似要素の改行を使ってステップ表示を実装しました。
white-spaceにpreを指定した上で、content内に\A
と記述すると、その部分が改行文字扱いとなります。
white-space: pre;
content: "1行目\A2行目 ";