title: How can I add prefixes to ordered list item numbers in email?
body: <p>I need to make a list like:</p>
  <pre><code>question 1: ...
  question 2: ...
  question 3: ...
  </code></pre>
  <p>I know this is easily achievable in CSS with something like <code>li:before{content:&quot;question &quot;}</code></p>
  <p>But my use case is an html-email, so I am limited to inline styling only. I can't use classes and selectors. Is there a solution?</p>
  <p>I would like to avoid repeating the word &quot;question&quot; for each list element in the code or break semantics otherwise.</p>
  <hr />
  <p>Just FYI, This is how it should look like in my use case:<br />
  <a href="https://i.stack.imgur.com/hPRVU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hPRVU.png" alt="enter image description here" /></a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ol style="max-width:7cm"&gt;
    &lt;li style="border:2px dotted rgb(187,187,187);padding:2mm;margin-bottom:3mm;background:#D8EDFF;border-radius: 20px;"&gt;Why is the sky blue ?&lt;/li&gt;
    &lt;li style="border:2px dotted rgb(187,187,187);padding:2mm;margin-bottom:3mm;background:#D8EDFF;border-radius: 20px;"&gt;How many teeth an adult human has?&lt;/li&gt;
    &lt;li style="border:2px dotted rgb(187,187,187);padding:2mm;margin-bottom:3mm;background:#D8EDFF;border-radius: 20px;"&gt;Why do birds fly south in the winter?&lt;/li&gt;
    &lt;li style="border:2px dotted rgb(187,187,187);padding:2mm;margin-bottom:3mm;background:#D8EDFF;border-radius: 20px;"&gt;Why can I sometimes see the moon during the day?&lt;/li&gt;
  &lt;/ol&gt;</code></pre>
  </div>
  </div>
  </p>