左对齐“内容”属性但右对齐div的实际内容

Question

我有一个固定宽度的盒子，想要对齐美元符号但是右对齐金额。

HTML

datetime

CSS

<div class="dollarAmount">80,500</div>
<div class="dollarAmount">1,150,000</div>

我创建了JSFiddle

由于

Answer 1

将之前的内容设置为向左浮动而不是文本对齐。

以下是它的外观：

.dollarAmount{width:80px;border:1px solid #ccc;text-align:right}
.dollarAmount:before {content: "$ ";float:left}

Answer 2

只需漂浮美元符号：

.dollarAmount:before {content: "$ ";float:left}