css - 添加字母间距时，50% 百分比超过一半的内容

Question

我有这段显示五颗星的代码:

@import 'https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css';
.score {
  display: inline-block;
  font: normal normal normal 20px/1 FontAwesome;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  text-decoration: none;
  color: #dcdcdc;
  position: relative;
  letter-spacing: 10px;
}
.score {
  border: 1px solid #000;
}
.score::before,
.score span::before{
  content: "\f005\f005\f005\f005\f005";
  display: block;
}
.score span {
  color: #FFD700;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

<span class="score" data-toggle="tooltip" title="5 Bewertungen | Durchschnitt: 4.6 Punkte">
  <span style="width: 50%"></span>
</span>

使用letter-spacing 分隔星星:

letter-spacing: 10px;

我想突出显示 2 星半，所以我使用 width: 50%。但是 50% 并不正好在星的中间。当我删除 letter-spacing 时，50% 看起来是正确的。我怎样才能改变它，使 50% 与 letter-spacing 正确？

Answer 1

移除字母间距并在每个星星之间添加一个空格，如下所示:

https://jsfiddle.net/39y4ctkg/

.score::before,
.score span::before{
  content: "\f005\00a0\f005\00a0\f005\00a0\f005\00a0\f005";
  display: block;
}