"content" 属性 左对齐，但 div 实际内容右对齐

Question

我有一个宽度固定的框，我想左对齐美元符号，右对齐金额。

HTML

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

css

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

我创建了一个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}