通常は ol + li 要素を使って番号付きのリストを表示させることができますが、「第1章、第2章…」や「1問目、2問目…」など、数字と一緒に他の単語も表示させたい場合は counter-increment
プロパティを使い、:before疑似要素
や :after疑似要素
と併せて適用することで、カウンタの値を要素に挿入することができます。
CSS の表記
ol li { list-style: none; counter-increment: chapter; } ol li:before { content: "第" counter(chapter) "の習慣"; padding-right: 10px; }
html の表記
<ol> <li>主体性を発揮する</li> <li>目的を持って始める</li> <li>重要事項を優先する</li> <li>Win-Winを考える</li> <li>理解してから理解される</li> <li>相乗効果を発揮する</li> <li>刃を研ぐ</li> </ol>
ちなみに counter-increment プロパティはリストタグを使わなくても実装できますが、無難に「番号リスト」の役割を持つ ol タグを使うことをお勧めします。