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

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

有没有一个CSS函数可以做到这一点

---

提前谢谢。

可能是这样的吗

HTML:

---

查看并让我知道这是否有帮助。

一个非常简单的方法是：

HTML:

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

请参见此处->

但是，如果您很好地理解伪选择器，则最好使用以下选项：

HTML:

请参见此处->

希望这有帮助

使用

元素设置内嵌文本的样式：

HTML:

A为了方便

---

与lante的答案不同的是，这也适用于更老的浏览器。有关更多信息，请参阅。

使用：before伪选择器

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

---

如果您确实必须这样做，请使用

<small>$</small>300.00

---

同样的答案已经贴了4次了！（随后被否决，然后被删除）。令人震惊…现在我的鼻子里有辣椒！到底发生了什么事。@DamienRoche就是这样的问题，你知道：）你不应该这样做。它的排版和实际上都是错误的。货币符号应与数字样式匹配。如果没有，说明字体设计错误，你应该使用另一种字体。答案很好。但是我建议使用em或百分比值（例如，0.85em或80%）而不是像素（就像在小提琴中所做的那样），因为使用em时，货币符号的字体大小与金额的字体大小有关。Wow不知道这个伪类。。顺便说一句，如果我想让美元符号像商标一样显示得更高，那就错了，垂直对齐：顶部；对的谢谢大家。是的，看。我还使用@SVSchmidt recommendationsplease编辑了我的答案，将其标记为您的答案它符合您的需要这会让CSS显示基本信息（货币单位），违反可访问性原则。

.text {
    font-size: 18px;
}

.dollar {
    font-size:15px;
}

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

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

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

.currency{

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

}

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

<small>$</small>300.00

small { font-size: 75% }