[CSS] counter-increment を利用した list-style の変更

利用規約みたいな番号付きリストがやたら入れ子になる文書のマークアップしたときに、
入れ子になっているリストのリスト番号には括弧を付けたいっていうケースがあるじゃないですか…
そういえばcounterがあったな〜って思い出したんだ…

ul,ol {
  list-style: inherit;
  margin: 20px;
}

li {
  line-height: 1.3;
  margin: 20px 0;
  vertical-align: top;
}

ol > li {
  list-style-type: decimal;
}
ol > li > ol {
  margin-left: 0;
}
  
ol > li > ol > li {
  counter-increment: counterListInc;
  list-style: none;
 }

ol > li > ol > li:before {
  content: "("counter(counterListInc, decimal)")";
  display: inline-block;
  text-align: center;
}