CSSで見出しタグに連番をつけて「手順書」っぽくする - Qiita

<h1>カレーライスの作り方</h1> <div class="steps"> <h2>野菜と肉を切る</h2> <p>いい感じの大きさに野菜と肉を切ります。</p> <h2>煮込む</h2> <p>切った具材を鍋に入れて煮込みます。</p> <h2>味付け</h2> <p>カレールーなど調味料を入れて完成です。</p> </div> .steps { /* 連番カウンター名の定義 */ counter-reset: step-counter; /* 縦棒との位置関係に必要 */ position: relative; /* 縦棒と連番のためのスペースを左に確保 */ padding-left: 2rem; /* 連番(1.5rem) + 余白 */ } /* 縦棒 */ .steps:before { content: ""; /* 幅と色 */ background-color: #d