パーツ番号 02-05-09 ・ CSSのみ

番号バッジ付きステップリスト

丸背景の番号バッジが先頭に付くステップリストです。始め方ガイドや手順解説の記事にそのまま使えます。

staticcss

プレビュー

ソースコード

HTML

<ol class="d02-05-09-list">
          <li>アカウントを作成する</li>
          <li>プロフィールを設定する</li>
          <li>最初の投稿を公開する</li>
        </ol>

CSS

.d02-05-09-list{list-style:none;margin:0;padding:0;counter-reset:d659c;width:100%;max-width:280px;font-size:14px;color:#333;}
        .d02-05-09-list li{position:relative;counter-increment:d659c;padding:8px 0 8px 40px;min-height:24px;border-bottom:1px solid #eee;}
        .d02-05-09-list li:last-child{border-bottom:none;}
        .d02-05-09-list li::before{content:counter(d659c);position:absolute;left:0;top:6px;width:26px;height:26px;background:#ef6c00;color:#fff;border-radius:50%;font-size:13px;font-weight:bold;line-height:26px;text-align:center;}

クラス名 .d02-05-09 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。