Tips for aligning ordered list numbers to the right

Question

Consider the following code:

In the output, the list items are indeed on the right, but the numbers are not in the right position. How can I align the numbers to the right position as well?

ol {
  width: 15vw;
}

<ol style="text-align:right;">
  <li>Orange</li>
  <li>Apple</li>
  <li>Mango</li>
  <li>Pineapple</li>
  <li>Pear</li>
  <li>Grape</li>
  <li>Watermelon</li>
  <li>Strawberry</li>
  <li>Blueberry</li>
  <li>Raspberry</li>
  <li>Kiwi</li>
</ol>

Answer 1

Add the rtl direction attribute to the ol tag: dir="rtl".