使用CSS在左侧显示价格较小的价格的最佳方式是什么？

Question

我需要显示ex：$ 300.00，但是我需要显示的美元符号小于数字，所以它看起来像商标，但不是那么小。

是否有CSS功能可以做到这一点？

提前谢谢。

Answer 1

可能是这样的吗？

HTML：

<span class="dollar">300.00</span>

CSS：

.dollar:before {
    content: '$';
    font-size: somethingSmaller;
}

请参阅this fiddle并告诉我这是否有帮助。

Answer 2

使用<span>元素设置内嵌文字的样式：

HTML：

<span class="currency">$</span>
<span class="price">300</span>

CSS：

.currency{

  font-size:.5em;
  vertical-align:text-top; /* resembling more the tm symbol you mentioned */

}

为方便起见fiddle ...

与lante的答案不同的是，这也适用于更老的浏览器。有关详细信息，请参阅support for :before and :after pseudo elements。

Answer 3

一种非常简单的方法是：

HTML：

<div class="text">
   <span class="dollar">$</span>300
</div>

CSS：

.text {
    font-size: 18px;
}

.dollar {
    font-size:15px;
}

请参阅此处 - ＆gt; http://jsfiddle.net/xMKsH/

但是，如果您理解伪选择器，那么最好使用它：

HTML：

<div class="text">300</div>

CSS：

.text {
    font-size: 18px;
}
.dollar:before {
    content:'$';
    font-size:15px;
}

请参阅此处 - ＆gt; http://jsfiddle.net/xMKsH/1/

希望这会有所帮助!!

Answer 4

使用：before伪选择器

.amount:before {
  content: "$";
  font-size:.9em;
}

Answer 5

如果你真的必须这样做，请使用

<small>$</small>300.00

并且，如果需要，可以在CSS中设置small的大小，例如

small { font-size: 75% }