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

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

Contents

CSSだけでliタグにナンバリングと前後に文字をつけて表示するCSS記述
liタグにナンバリングと前後に文字をつけて表示するHTML記述
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>