如何在此场景下编写星级CSS？

<div id="star-rating"></div>

#star-rating {
  display: inline-block;
  width: 100px; /* 星级评分的宽度 */
  height: 20px; /* 星级评分的高度 */
  background: url(star.png) repeat-x; /* 星星的背景图片 */
}

#star-rating::before {
  content: "";
  display: block;
  width: 0;
  height: 100%;
  background: url(star.png) repeat-x; /* 星星的背景图片 */
  transition: width 0.5s; /* 过渡效果，使星级评分具有动画效果 */
}

#star-rating:hover::before {
  width: 100%; /* 鼠标悬停时，星级评分的宽度为100% */
}

<link rel="stylesheet" href="star-rating.css">

<div id="star-rating"></div>