Left alignment of the "content" property but right alignment of the actual content of the div

Question

I have a box with a fixed width and would like to left align the dollar sign but right align the amount.

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}

I've created a JSFiddle

Thanks

Answer 1

Set your before content to float left instead of text-align.

Here's how it should look:

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

Answer 2

Just float the dollar sign:

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