如何简化这个css星级评分？

<div class="rating" data-rating="4.5"></div>

.rating {
  display: inline-block;
  font-size: 0; /* 清除默认间距 */
  position: relative;
  color: #f8ce0b; /* 星星颜色 */
}

.rating::before {
  content: "\2605\2605\2605\2605\2605"; /* 五个星星 */
  font-size: 20px; /* 星星大小 */
}

.rating::after {
  content: "\2605\2605\2605\2605\2605"; /* 五个星星 */
  font-size: 20px; /* 星星大小 */
  color: #f8ce0b; /* 星星填充颜色 */
  position: absolute;
  top: 0;
  left: 0;
  width: var(--rating); /* 根据评分动态设置宽度 */
  overflow: hidden;
  white-space: nowrap;
}

/* 设置不同评分对应的宽度 */
[data-rating="0.5"] { --rating: 10%; }
[data-rating="1"] { --rating: 20%; }
[data-rating="1.5"] { --rating: 30%; }
[data-rating="2"] { --rating: 40%; }
[data-rating="2.5"] { --rating: 50%; }
[data-rating="3"] { --rating: 60%; }
[data-rating="3.5"] { --rating: 70%; }
[data-rating="4"] { --rating: 80%; }
[data-rating="4.5"] { --rating: 90%; }
[data-rating="5"] { --rating: 100%; }