如何在反馈星之间增加空间？

Question

我使用HTML和CSS创建了五个反馈明星。下面是相同的图片。

如您所见，恒星彼此之间的距离太近了。我想在星星之间留一些空间。我已经用边距填充了所有内容。但是没有任何效果。下面是代码：

.ratings {
  position: relative;
  vertical-align: middle;
  display: inline-block;
  color: #b1b1b1;
  overflow: hidden;
}

.full-stars {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  overflow: hidden;
  color: #fde16d;
}

.empty-stars:before,
.full-stars:before {
  content: "\2605\2605\2605\2605";
  font-size: 14pt;
}

.empty-stars:before {
  -webkit-text-stroke: 1px #848484;
}

.full-stars:before {
  -webkit-text-stroke: 1px orange;
}


/* Firefox */

@-moz-document url-prefix() {
  .full-stars {
    color: #ECBE24;
  }
}

<div class="ratings">
  <div class="empty-stars"></div>
  <div class="full-stars" style="width:70%"></div>
</div>

下面是工作的小提琴： https://jsfiddle.net/4qqspqxh/862/

您能帮我在星星之间留些空隙吗？

Answer 1

尝试一下：

.empty-stars:before, .full-stars:before {
   content: "\2605\2605\2605\2605";
   font-size: 14pt;
   letter-spacing: 4pt;
}

Answer 2

.empty-stars:before, .full-stars:before {
    content:"\2605\2605\2605\2605";
    font-size: 14pt;
}

赋予空格内容变化如下：：

.empty-stars:before, .full-stars:before {
    content:"\2605  \2605  \2605  \2605";
    font-size: 14pt;
}