リストの項目番号を最後の数字で配置します...？

Question

私は動的に生成された順序付きリストを持ち、最大105個のアイテムを持っています。私はliで番号をスタイリングしています：前に、すべては問題ありませんが、リストが3桁になると、リストの項目と数字が重なり始めます。これは数字の終わりと李自身の一部を覆い隠します。私がしたいのは、最初の桁ではなく、最後の桁で桁数を揃えることです。私はこれをどのように尋ねるのか正確には分からないので、おそらく私は答えを見つけ出すことができません。例以下：リスト項目の番号がデフォルトで表示されるように思える方法

：

1. 
5. 
10. 
50. 
100. 

私が達成しようとしているもの：

1. 
    5. 
10. 
50. 
100. 

私は

を追加することでビットを試してきました

direction: rtl 

および

text-align-last: right 

をliに：前に、しかしどちらも何もしていないようです。

助けてくれてありがとう、そして、これがばかげた質問であれば、ごめんなさい！

編集：ここは私のCSSです。ありがとう！

li:before { 
    text-shadow: 2px 2px 4px #000000; 
    margin-left:-20px; 
    margin-top:25px; 
    content: counter(item); 
    color: white; 
    display: inline-block; 
    font-size:2rem; 
    direction: rtl; 
    text-align-last: right; 
} 

Answer 1

あなたの現在の状況を正確に理解できるように、さらにhtmlとcssを投稿できますか？

デフォルトでは、順序付きリストは項目番号を右揃えにします。私は、私はあなたがこれで後だと思うものを達成している：コメントを

ol li { 
 
    /* Style the list number */ 
 
    color: red; 
 
    font-size: 20px; 
 
    font-weight: bold; 
 
} 
 

 
ol li span { 
 
    /* Style the list item text */ 
 
    color: green; 
 
    font-size: 14px; 
 
    font-weight: normal; 
 
}

<ol> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
    <li><span>Item text</span></li> 
 
</ol>