css向左移動一個字符串兩個空格

Question

我有兩個li的ul。

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

現在當打印它們沒有正確對齊時。我想要做的是將第二類兩個左邊的兩個空格移動，這樣兩個美元符號符號垂直對齊，這是我的codepen。

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>