1ヶ月前に投稿

CSS カウンターを使ってみる

2.5

CSS カウンターで、
ページ内の見出し番号を
自動的に振ってみます。
以下の例では
見出し h5 に番号を振っています。

.post {
  counter-reset: section;  /* 1 */
}

.post h5 {
  font-size: 16px
}

.post h5::before {
  counter-increment: section;  /* 2 */
  content: counter(section) ". ";  /* 3 */
  color: #00b7a8;
  font-weight: bold;
}
'section’ という名前のカウンターを設定し、0 で初期化する。
section カウンターの値に1を加算。
section カウンターの値を表示。
貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました
CSS カウンターを使ってみる