olの連番を括弧つきにしたり、装飾

ol.bracket,
ol.bracketIroha,
ol.katakana,
ol.closing_bracket {
  list-style-type: none;
  margin-left: -20px;
}
ol.bracket > li,
ol.closing_bracket > li {
  counter-increment: cnt;
}
ol.bracket > li:before {
  content: "( "counter(cnt) " ) ";
}
ol.closing_bracket > li:before {
  content: counter(cnt) " ) ";
}
ol.bracketIroha > li,
ol.katakana > li
{
counter-increment: cnt;
position: relative;
padding-left: 3.0rem;
}
ol.katakana > li{
  padding-left: 1.5rem;
}

ol.bracketIroha > li:before {
content: "( "counter(cnt, katakana-iroha)" )";
position: absolute;
top: 0;
left: 0;
}
ol.katakana > li:before {
content: ""counter(cnt, katakana)"";
position: absolute;
top: 0;
left: 0;
}

olタグにクラス適用。