javascript - 如何在 css 中相互使用两个内容？

Question

我正在建立一个 wordpress 网站，并且在网站上有星级评级。我使用 css 和 javascript 来实现这个。下面是代码。

HTML 部分

<div class="rating1"></div>

样式部分

<style>
    .rating1::before {
        content: "\2605\2605\2605\2605\2605"
    }
    .rating1 {
        font-size: 48px;
        color: #ffa500;
        display: inline-block;
        overflow: hidden;
    }
<style>

脚本部分

<script>
   function rating1(stars1) {
      var ratingfill1 = stars1;
      var rating_integer1 = Math.floor(ratingfill1);
      var rating_decimal1 = ratingfill1 % 1;
      var rating_dec_trimmed1 = rating_decimal1.toFixed(1);
      if ((rating_dec_trimmed1 == 0.1) || (rating_dec_trimmed1 == 0.2) ||
         (rating_dec_trimmed1 == 0.3) || (rating_dec_trimmed1 == 0.4)) {
         document.getElementById("star1s" + getstarid).style.width =
            ((40 * rating_integer1) + 18) + 'px';
      }
      if ((rating_dec_trimmed1 == 0.6) || (rating_dec_trimmed1 == 0.7) ||
         (rating_dec_trimmed1 == 0.8) || (rating_dec_trimmed1 == 0.9)) {
         document.getElementById("star1s" + getstarid).style.width =
            ((40 * rating_integer1) + 28) + 'px';
      }
      if (rating_dec_trimmed1 == 0.5) {
         document.getElementById("star1s" + getstarid).style.width =
            ((40 * rating_integer1) + 20) + 'px';
      }
      if (rating_dec_trimmed1 == 0) {
         document.getElementById("star1s" + getstarid).style.width =
            (40 * rating_integer1) + 'px';
      }
   }
</script>

我正在使用一个 javascript 函数来显示星星(甚至可以显示小数值)这个函数(rating1())根据给函数的 star1 的值改变了星星内容的长度。

我想要完成的是在带有填充 ('\2605') 的星星正下方添加不带填充 ('\2606') 的星星，以完成类似的操作。

Answer 1

像这样开始可能会让事情变得更容易。它是两组星星，灰色星星和黄色星星绝对位置在上面。黄色星星包装器具有overflow:hidden;，因此您可以设置它的百分比宽度来定义要显示多少颗黄色星星。

.rating::before, .rating-wrapper::before {
  content: "\2605\2605\2605\2605\2605"
}
.rating-wrapper {
  font-size: 48px;
  color: grey;
  display: inline-block;
  overflow: hidden;
  position: relative;
}
.rating {
  color: #ffa500;
  position: absolute;
  top:0;left:0;right:0;
  width:90%; /* Adjust this width to define how many stars to show */
  height:100%;
  overflow: hidden;
}

<div class="rating-wrapper"><div class="rating"></div></div>