rating.css

ul {
  list-style: none;
}
ul li {
  display: inline;
}
ul li:before {
  content: '\2606';
}
ul[data-rating="1"] li:nth-child(1):before {
  content: '\2605';
}
ul[data-rating="2"] li:nth-child(1):before {
  content: '\2605';
}
ul[data-rating="2"] li:nth-child(2):before {
  content: '\2605';
}
ul[data-rating="3"] li:nth-child(1):before {
  content: '\2605';
}
ul[data-rating="3"] li:nth-child(2):before {
  content: '\2605';
}
ul[data-rating="3"] li:nth-child(3):before {
  content: '\2605';
}
ul[data-rating="4"] li:nth-child(1):before {
  content: '\2605';
}
ul[data-rating="4"] li:nth-child(2):before {
  content: '\2605';
}
ul[data-rating="4"] li:nth-child(3):before {
  content: '\2605';
}
ul[data-rating="4"] li:nth-child(4):before {
  content: '\2605';
}
ul[data-rating="5"] li:nth-child(1):before {
  content: '\2605';
}
ul[data-rating="5"] li:nth-child(2):before {
  content: '\2605';
}
ul[data-rating="5"] li:nth-child(3):before {
  content: '\2605';
}
ul[data-rating="5"] li:nth-child(4):before {
  content: '\2605';
}
ul[data-rating="5"] li:nth-child(5):before {
  content: '\2605';
}