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

Wordpress のテーマはおしゃれなものが多いですよね。

このサイトは Astro.js を使って自作しているんですが、デザインでも SEO でもなかなか勝てません。

その中でも、作業工程などを説明する際に便利な step1, step2…と垂直方向に表示されるアレ。憧れます。

これ ↓ です。

1. first step

   first content

2. second step

   second content

3. 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行目 ';