要素に連番を与えるcounter-increment

  • Updated: 2022.10.10
  • Published: 2021.07.25
  • 991views

olタグで連番を与えることはできますが、それ以外の要素でも与えることができます。

HTML

<div class="list">
  <div class="item">テキスト</div>
  <div class="item">テキスト</div>
  <div class="item">テキスト</div>
  <div class="item">テキスト</div>
  <div class="item">テキスト</div>
  <div class="item">テキスト</div>
</div>

html構造としては連番を与えたい要素を囲みます。クラス「list」「item」はユニークな文字列でOKです。

Style Sheet

.list {
	counter-reset: number;
}

.item:before {
	counter-increment: number;
	content: "No." counter(number);
}

全体を囲っているlistにcounter-resetを指定。numberはユニークな名前を指定。連番を与えたい要素には擬似要素にcounter-incrementとcontentを指定します。numberはcounter-resetで指定した文字列になります。

結果

テキスト
テキスト
テキスト
テキスト
テキスト
テキスト

対応状況

まとめ

olを使用できないときに使う形になります。

関連記事

人気の投稿

最新の投稿

タグ

月別アーカイブ

CONTACT
CONTACT
CONTACT
CONTACT
CONTACT
CONTACT
CONTACT
CONTACT

WEB制作依頼はお問合せフォームから

お問合せフォーム
CONTACT
CONTACT
CONTACT
CONTACT
CONTACT
CONTACT
CONTACT
CONTACT