CSSでh2やh3の前に連番で番号を入れる場合

WordPress等を使ってお客さんの方で固定ページを更新する場合、極力HTML要素を少なくして作業してもらうために、自動でタイトルを連番で付与できるようにCSSで設定しておく事がある。
そんな時のためのCSSカウンタを使った作業メモ。

CSS

.numbering-area {
  counter-reset: number;
  margin: 0;
  
}
.numbering-area h2::before {
  counter-increment: number;
  content: counter(number);
  padding-right: 8px;
}

HTML

<section class="numbering-area">
  <h2>lorem ipsum</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</p>
  <h2>lorem ipsum</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</p>
  <h2>lorem ipsum</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</p>
</section>

表示形式

content: counter(number, 形式※);

※形式の例