How can I add prefixes to ordered list item numbers in email?

Solution 1:

You could use negative margins on interior elements to shift the prefixes. You'd then use a matching positive margin on the list. I'm using em elements to try and account for varying font sizes. You should test well. Maybe rem units would be better.

<ol style="max-width:7cm; margin-left: 5.5em;">
  <li style="border: 2.0px dotted rgb(187,187,187);padding: 2.0mm;margin-bottom: 7.0mm;background: rgb(238,238,238);border-radius: 20px;">
    <span style="margin-left: -90px; margin-right: 25px;">Question</span> 
    Why is the sky blue?
  </li>
    
  <li style="border: 2.0px dotted rgb(187,187,187);padding: 2.0mm;margin-bottom: 7.0mm;background: rgb(238,238,238);border-radius: 20px;">
    <span style="margin-left: -5.5em; margin-right: 25px;">Question</span> 
    How many teeth does an adult human have?
  </li>
  
  <li style="border: 2.0px dotted rgb(187,187,187);padding: 2.0mm;margin-bottom: 7.0mm;background: rgb(238,238,238);border-radius: 20px;">
    <span style="margin-left: -5.5em; margin-right: 25px;">Question</span> 
    Why do birds fly south in the winter?
  </li>
  
  <li style="border: 2.0px dotted rgb(187,187,187);padding: 2.0mm;margin-bottom: 7.0mm;background: rgb(238,238,238);border-radius: 20px;">
    <span style="margin-left: -5.5em; margin-right: 25px;">Question</span>
    Why do birds fly south in the winter?
  </li>
</ol>

Solution 2:

For customisations like this which are cross-email compatible, you will have to break semantics and use a table.

<table style="width:100%;max-width:500px;">
    <tr>
        <td style="width:30px;vertical-align: middle" width="30"><p style="margin:0;font-size:14px;margin-bottom:25px;">Question&nbsp;1:</p>
</td>
<td style="vertical-align: top"><p style="margin:0;font-size:14px;border: 2px dotted rgb(187,187,187);padding: 10px;margin-bottom: 25px;background: rgb(238,238,238);border-radius: 20px;">Why is the sky blue?</p>
</td>
    </tr>
    <tr>
        <td style="width:30px;vertical-align: middle" width="30"><p style="margin:0;font-size:14px;margin-bottom:25px;">Question&nbsp;2:</p>
</td>
<td style="vertical-align: top"><p style="margin:0;font-size:14px;border: 2px dotted rgb(187,187,187);padding: 2.0mm;margin-bottom: 25px;background: rgb(238,238,238);border-radius: 20px;">Why is the sky blue?</p>
</td>
    </tr>
    <tr>
        <td style="width:30px;vertical-align: middle" width="30"><p style="margin:0;font-size:14px;margin-bottom:25px;">Question&nbsp;3:</p>
</td>
<td style="vertical-align: top"><p style="margin:0;font-size:14px;border: 2px dotted rgb(187,187,187);padding: 2.0mm;margin-bottom: 25px;background: rgb(238,238,238);border-radius: 20px;">Why is the sky blue?</p>
</td>
    </tr>
</table>

This won't achieve rounded corners in Outlook (there are plenty of answered questions on SO, or elsewhere on that).

But it shows a lot better in Gmail and others (first is this; second is @isherwood's)

And in Outlook Windows: