Question

我想添加3个绿色圆圈：之前的伪元素，以显示我的产品的库存状态，类似于下面的内容：

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

我只知道如何申请一个圈子，但我怎样才能添加三个或更多？我还想过使用HTML字符，但没有绿色圆圈......

Answer 1

框阴影......不需要伪元素。除非你想。

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

<div class="blob"></div>

Answer 2

如果您使用的是字体图标，则只需添加一个而不是三个相同的内容

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

这是fontawosome图标的示例，您可以通过letter-spacing

管理图标之间的空间

OR

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

详细了解multiple background images

添加圈子：之前

2 个答案: