今回はcssのcounter-incrementを使って、liタグにナンバリングとナンバリングの前後に文字をつけて表示する方法をご紹介します。
Contents
ディスプレイ広告
CSSだけでliタグにナンバリングと前後に文字をつけて表示するCSS記述
※liタグにcounter-increment: count;を指定し、li:beforeにcontentを使ってナンバリング(数字が増加)文字が表示される様にしてます。
必要に応じて変更して下さい。
<style type="text/css"> body{ padding: 0; margin: 0; font-size: 18px; } h1{ line-height:1.6em; text-align:center; font-weight:normal; padding:15px 0 30px 0; font-size: 18px; } ul{ list-style: none; width: 400px; margin: 0 auto; } ul > li { counter-increment: count; position: relative; padding: 0 0 8px 4rem; } ul > li:before { content: "第"counter(count)"弾:"; position: absolute; top: 10%; left: 0; } </style>
liタグにナンバリングと前後に文字をつけて表示するHTML記述
※ul、liタグを用意します。必要に応じて変更して下さい。
<h1>liタグにナンバリングと前後に文字をつけて表示</h1> <ul> <li>テキスト1テキスト1テキスト1</li> <li>テキスト2テキスト2</li> <li>テキスト3</li> <li>テキスト4テキスト4</li> <li>テキスト5テキスト5テキスト5</li> </ul>
liタグにナンバリングと前後に文字をつけて表示するデモページ
※流用される場合は自己責任でお願いします。
デモページ