CSS

CSSだけでliタグにナンバリングと前後に文字をつけて表示する方法

今回はcssのcounter-incrementを使って、liタグにナンバリングとナンバリングの前後に文字をつけて表示する方法をご紹介します。

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タグにナンバリングと前後に文字をつけて表示するデモページ

liタグにナンバリングと前後に文字をつけて表示するデモ

 

※流用される場合は自己責任でお願いします。
 デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。