<details>
  <summary>Q1: question #1</summary>
  <p>answer #1.0</p>
  <p>answer #1.1
</details>
<details>
  <summary>Q2: question #2</summary>
  <p>answer #2.0</p>
  <p>answer #2.1</p>
  <p>answer #2.2</p>
  
</details>
<details>
  <summary>Q3: question #3</summary>
  <p>answer #3.0</p>
</details>
<br>
<br> Open: <b id=openDetailCount></b>
<br> Closed: <b id=closedDetailCount></b>
::root{
  counter-reset: openDetailCount, closedDetailCount;
}
details{
  counter-increment: closedDetailCount;
}
details[open]{
  counter-increment: openDetailCount;
}
#closedDetailCount::before{
  content: counter(closedDetailCount);
}
#openDetailCount::before{
  content: counter(openDetailCount);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.