【CSS】番号リストの表示を変更する方法。

Ads by Google

通常は 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 タグを使うことをお勧めします。

こちらの記事もいかがですか?

アナタにオススメ!
同じカテゴリーの他の記事です。

Ads by Google

Leave a Replyコメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です