CSS部分填充的星星和间距

我正在使用HTML和CSS来显示基于百分比的星级。我正在尝试使该百分比与填充的星星的百分比相匹配。

我关闭了它，但是当我添加“ letter-spacing”和“ padding-left” CSS使其在网页上看起来更好时，填充区域的百分比会发生变化。

这是我的HTML和CSS：

.score {
  margin-bottom: 5px;
  display: inline-block;
  font-size: 40px;
  color: #ccc;
  position: relative;
  text-shadow: 0px 0px 4px #FFF;
}

.score::before,
.score span::before {
  content: "?????";
  display: block;
}

.score span {
  color: #E6DB74;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.scorePadded {
  margin-bottom: 5px;
  display: inline-block;
  font-size: 40px;
  color: #ccc;
  position: relative;
  text-shadow: 0px 0px 4px #FFF;
  letter-spacing: 20px;
  padding-left: 5px;
}

.scorePadded::before,
.scorePadded span::before {
  content: "?????";
  display: block;
}

.scorePadded span {
  color: #E6DB74;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  padding-left: 5px;
}

body {
  background: black;
}