用 :before 添加圆圈 [关闭]答案

【问题标题】：Adding circles with :before [closed]用 :before 添加圆圈 [关闭]
【发布时间】：2016-06-03 12:34:31
【问题描述】：

我想用 :before 伪元素添加 3 个绿色圆圈，以显示我的产品的库存状态，如下所示：

http://www.chililips.com/LACOSTE-Lounge-Pant-Schlafhose-lang-gruen

我只知道如何申请一个圈，但我如何添加三个或更多？我也想过用HTML字符，但是没有绿圈……

【问题讨论】：

我们希望您尝试使用的代码来查看您的问题所在。有可能使用单个伪但不可能猜出您的 HTML 或您已经使用的 css。
这很简单，就像您添加单个图标一样，但首先按照@GCyrillus 的要求分享您的代码
我有这个：.text:before{ content: '';显示：内联块；宽度：15px；高度：15px； -moz-边界半径：15px； -webkit-border-radius：15px；边框半径：15px；背景颜色：#69b6d5； }

【解决方案1】：

盒子阴影...不需要伪元素。除非你愿意。

.blob {
  width: 50px;
  height: 50px;
  background: lime;
  border-radius: 50%;
  margin: 3em 15em;
  box-shadow: 5em 0em 0 lime, 10em 0em 0 lime;
}

&lt;div class="blob"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

如果你使用字体图标，你可以简单地添加一个而不是三个相同的内容

.fa-circle:before {
    content: "\f111" "\f111" "\f111";
}

这是一个fontawosome图标的例子，你可以通过letter-spacing管理图标之间的空间

或

如果您使用图像作为图标，则只需拍摄带有三个图标的图像或使用多个背景图像，例如background: background1, background 2, ..., backgroundN;

【讨论】：