cssで偶数での連番表示

Question

リストタグで連番の値をQとAとそれぞれ１番から始めたいのですがうまくいきません。nth-child(2n+1)のようにするにはどうすればいいでしょうか？

.list {
counter-reset: count 0;
list-style-type: none;
}
.list li span:after {
counter-increment: count 1;
content: counters(count, "-") ". ";
}

<ul class="list">
<li><span>Q</span>hoge</li>
<li><span>A</span>hoge</li>
<li><span>Q</span>hoge</li>
<li><span>A</span>hoge</li>
</ul>

実現したhtml

<ul class="list">
<li><span>Q１</span>hoge</li>
<li><span>A１</span>hoge</li>
<li><span>Q２</span>hoge</li>
<li><span>A２</span>hoge</li>
</ul>

Answer 1

.list {
  counter-reset: count 0;
  list-style-type: none;
} 
.list li span::after {
  content: counter(count) ". ";
}
.list li:nth-child(2n+1) {
  counter-increment: count;
}

CSS Counter の制御はこれでできますが、そもそも Q と A の番号は HTML 側に記述されるべきで CSS で表現するべきものではないように思います。