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

简化CSS星级评分可以通过使用伪元素和CSS变量来实现。以下是一种简化的实现方式：

HTML结构：

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

CSS样式：

.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%; }

通过设置data-rating属性来指定评分，然后使用CSS变量--rating来动态设置星级评分的宽度。这样就可以根据评分的不同显示不同的星级评分。

推荐的腾讯云相关产品：无

请注意，以上代码只是一种简化的实现方式，实际应用中可能需要根据具体需求进行调整和扩展。