CSSは左に2つのスペースを移動します

Question

私は2つのliを持つulを持っています。

<ul> 
    <li class="first">$2.00</li> 
    <li class="second">- $4.00</li> 
</ul> 

今のところプリントが正しく整列していない場合。私がしたいのは、2番目のクラスを2つ左の2つのスペースに移動することです。ドル記号のシンボルの両方が垂直に整列するので、これは私のコードペインです。

codepen

Answer 1

私はこのようなクラスに記号を指定します：ほとんどの会計アプリケーションは、異なる負の数を示すことが期待されているよう

.negative::before { 
 
    position: absolute; 
 
    content:"-"; 
 
    left: 40px; 
 
}

<ul> 
 
    <li class="first positive">$2.00</li> 
 
    <li class="second negative">$4.00</li> 
 
</ul>

それは（特に便利です国の用途に応じて）。

必要であれば、それは自動的に「負」のクラスを設定するためにJavaScriptを使用することが可能です：

[].forEach.call(document.querySelectorAll("li"), function(e){ 
 
    if (/^-\$\d+(\.\d+)?$/.test(e.textContent)){ 
 
     e.className = "negative"; 
 
     e.textContent = e.textContent.replace(/-/,''); 
 
    } 
 
});

.negative::before { 
 
    position: absolute; 
 
    content:"-"; 
 
    left: 40px; 
 
    color: red; 
 
}

<ul> 
 
    <li>$2.00</li> 
 
    <li>-$4.00</li> 
 
</ul>