CSSカウンターで見出し番号を振る

このページの目的

CSSカウンターで見出し番号を振る。

h2, h3, h4 の三段階で番号を振る。

このページで試してみる。

デモ用のHTML

H3 タイトルA

H4 タイトルA

H4 タイトルB

H3 タイトルB

H4 タイトルA

H4 タイトルB

⬆ 見出し番号は正しく出力されているか？

コード

CSS

body {
  counter-reset: h2-cnt;
}
h2 {
  counter-reset: h3-cnt;
}
h2::before {
  counter-increment: h2-cnt;
  content: counter(h2-cnt) " ";
}
h3 {
  counter-reset: h4-cnt;
}
h3::before {
  counter-increment: h3-cnt;
  content: counter(h2-cnt) "." counter(h3-cnt) " ";
}
h4::before {
  counter-increment: h4-cnt;
  content: counter(h2-cnt) "." counter(h3-cnt) "." counter(h4-cnt) " ";
}

スマートな書き方ではない。もっとうまく書けないものか？
counter-reset プロパティは、疑似要素に書いても効かない。

参考