自動で連番付与できるCSS。counter-incrementの使い方

自動で連番付与できるCSS。counter-incrementの使い方

CSSで、自動に連番付与できるcounter-incrementの紹介です。

サイドバーの、よく読まれている記事部分に1、2、3・・・と連番で付与する方法です。

下記のような感じです。

作り方は以下のようになります。

html

CSS

counter-increment: カウンタ名(自由に決めてOK);
content:counter(上と同じカウンタ名,”.”) ” “;

これだけで、連番が可能です。

連番の後ろに好きな文字も入れることが可能です。
1位、2位など入れたいときは下記のようにします。

counter-increment: カウンタ名(自由に決めてOK);
content:counter(上と同じカウンタ名) “位”;

スポンサーリンク

counter-incrementが増えない場合

うまく増えないことがたまにあります。

その時は、下記のCSSを入れましょう。

これで、counter-incrementでカウントがちゃんとされるはずです。

スポンサーリンク

シェアする