.star {
  font-size: 20px;
  color: #ddd;
  position: relative;
  display: inline-block;
}

.star {
  font-size: 14px;
  color: #ddd;
  position: relative;
  display: inline-block;
}

.star.filled { color: #EF9F27; }
.star.half { color: #ddd; }
.star.half::after {
  content: '★';
  color: #EF9F27;
  position: absolute;
  left: 0; top: 0;
  width: 50%;
  overflow: hidden;
  display: block;
}