CSSカウンタを実装するために必要な以下のプロパティ・関数
counter-reset
プロパティcounter-increment
プロパティcontent
プロパティcounter
関数
CSSカウンタで昇順に採番する
See the Pen
css-counter by shiakisudev (@shiakisu)
on CodePen.
HTML
<h2>初めに</h2>
<h2>朝は〇〇をすべし</h2>
<h2>昼は〇〇をすべし</h2>
<h2>夜は〇〇をすべし</h2>
<h2>終わりに</h2>
CSS
body{
counter-reset:num
}
h2::before{
counter-increment:num;
content:"第"counter(num)"章 ";
}
CSSカウンタで降順に採番する
See the Pen
css-counter-decrement by shiakisudev (@shiakisu)
on CodePen.
以上で記事の解説はお終い!
HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ!同僚に差をつけよう!