JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

@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;
}
.score {
  border: 1px solid #000;
}
.score::before,
.score span::before{
  content: "\f005\00a0\f005\00a0\f005\00a0\f005\00a0\f005";
  display: block;
}
.score span {
  color: #FFD700;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}