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

I need to make a list like:

question 1: What if?
question 2: What if?
question 3: What if?

I know this is easily achievable in CSS with something like li:before{content:"question "}

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?

It should look like this, but with "question" prefixed to the numbers:

<ol style="max-width:7cm">
  <li style="border:2px dotted rgb(187,187,187);padding:2mm;margin-bottom:3mm;background:#D8EDFF;border-radius: 20px;">Why is the sky blue ?</li>
  <li style="border:2px dotted rgb(187,187,187);padding:2mm;margin-bottom:3mm;background:#D8EDFF;border-radius: 20px;">How many teeth an adult human has?</li>
  <li style="border:2px dotted rgb(187,187,187);padding:2mm;margin-bottom:3mm;background:#D8EDFF;border-radius: 20px;">Why do birds fly south in the winter?</li>
  <li style="border:2px dotted rgb(187,187,187);padding:2mm;margin-bottom:3mm;background:#D8EDFF;border-radius: 20px;">Why can I sometimes see the moon during the day?</li>
</ol>

I would like to avoid repeating the word "question" for each list element in the code.

CodePudding user response：

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>

CodePudding user response：

Whenever you're designing a email you can do it with inline css. Here's an example code for you:

<ul>
  <li>Question 1</li>
  <li>Question 2</li>
  <li>Question 3</li>
</ul>

I don't see any need to write pseudo-elements in emails.