title: CSS: Show ordered list item index in a child element
body: <p>I'm building an accordion type widget as in the following image:</p>
  
  <p><a href="https://i.stack.imgur.com/EBymf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EBymf.png" alt="Accordion"></a></p>
  
  <p>I'd like to use an ordered list where each <code>&lt;li&gt;</code> element contains a question, answer and expand/collapse button.</p>
  
  <pre><code>&lt;li&gt;
      &lt;span class="question"&gt;Example question&lt;/span&gt;
      &lt;span class="answer"&gt;Example answer&lt;/span&gt;
      &lt;a class="expand-collapse-button" href="#"&gt;&lt;/a&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>How do I display the list item index inside a child element of that list item without using Javascript? i.e. I want the <code>&lt;span class="question"&gt;</code> element to show its parent's index as in <code>1. Example question</code>.</p>