Javascript 如何在css中使用两个内容？

我正在建立一个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>

样式部分

<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>

.评级1：：之前{
内容：“\2605\2605\2605\2605\2605\2605”
}
.评级1{
字体大小：48px；
颜色：#ffa500；
显示：内联块；
溢出：隐藏；
}

脚本部分

<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>

功能等级1（开始1）{
var ratingfill1=开始1；
var额定值_整数1=数学下限（额定值填充1）；
var评级\u小数1=评级填充1%1；
风险值评级1=评级小数1.toFixed（1）；
如果（（额定值为0.1）额定值为0.2）||
（评级为0.3）|（评级为0.4））{
document.getElementById（“star1s”+getstarid）.style.width=
（（40*rating_integer1）+18）+‘px’；
}
如果（（额定值为0.6）；（额定值为0.7）||
（评级为0.8）|（评级为0.9））{
document.getElementById（“star1s”+getstarid）.style.width=
（（40*rating_integer1）+28）+‘px’；
}
如果（额定值=0.5）{
document.getElementById（“star1s”+getstarid）.style.width=
（（40*rating_integer1）+20）+‘px’；
}
如果（额定值=0）{
document.getElementById（“star1s”+getstarid）.style.width=
（40*额定值_整数1）+“px”；
}
}

我使用一个javascript函数来显示星号（甚至可以显示小数）。此函数（rating1（））根据给定给函数的star1值更改星号内容的长度

---

我想完成的是在带填充的星形（'\2605'）的正下方添加不带填充的星形（'\2606'）来完成类似的操作。

这样做可能会让事情变得更容易。它是两组星星，上面有灰色星星和黄色星星的绝对位置。黄色星星包装器有

溢出：隐藏这样您就可以设置它的百分比宽度来定义要显示的黄色星星的数量


.rating:：before、.rating wrapper:：before{
内容：“\2605\2605\2605\2605\2605\2605”
}
.评级包装{
字体大小：48px；
颜色：灰色；
显示：内联块；
溢出：隐藏；
位置：相对位置；
}
.评级{
颜色：#ffa500；
位置：绝对位置；
顶部：0；左侧：0；右侧：0；
宽度：90%；/*调整此宽度以定义要显示的星星数*/
身高：100%；
溢出：隐藏；
}
这样开始可能会让事情变得更容易。它是两组星星，上面有灰色星星和黄色星星的绝对位置。黄色星星包装器有
溢出：隐藏这样您就可以设置它的百分比宽度来定义要显示的黄色星星的数量


.rating:：before、.rating wrapper:：before{
内容：“\2605\2605\2605\2605\2605\2605”
}
.评级包装{
字体大小：48px；
颜色：灰色；
显示：内联块；
溢出：隐藏；
位置：相对位置；
}
.评级{
颜色：#ffa500；
位置：绝对位置；
顶部：0；左侧：0；右侧：0；
宽度：90%；/*调整此宽度以定义要显示的星星数*/
身高：100%；
溢出：隐藏；
}
如果您想主要通过图标内容来驱动星星的外观，出于风格原因，您可以这样做：


正文{
背景：黄金
}
.icons:：之前，.icons:：之后{
字体大小：32px；
位置：绝对位置；
左:20 ;；
溢出：隐藏；
空白：nowrap；
}
.图标：：之前{
内容：“\2606\2606\2606\2606\2606\2606”；
}
.图标：：之后{
内容：“\2605\2605\2605\2605\2605\2605”；
宽度：93px；
}
如果您想主要通过图标内容来驱动星星的外观，出于风格原因，您可以这样做：


正文{
背景：黄金
}
.icons:：之前，.icons:：之后{
字体大小：32px；
位置：绝对位置；
左:20 ;；
溢出：隐藏；
空白：nowrap；
}
.图标：：之前{
内容：“\2606\2606\2606\2606\2606\2606”；
}
.图标：：之后{
内容：“\2605\2605\2605\2605\2605\2605”；
宽度：93px；
}
我认为你需要做的第一件事是格式化你的代码，让人们更容易阅读。我们能看到rating1（）的实现吗？我认为你需要做的第一件事是格式化你的代码，让人们更容易阅读。我们能看到rating1（）的实现吗？谢谢，你的答案也是正确的，但是我在我的代码中使用了WizardCoder的答案。有可能在多个答案中打上正确的勾吗？我不认为你可以将多个答案标记为正确的（我仍然是这里的一个noob），但不用担心；我发布了这篇文章，以防你在使用了两组不同的图标（即，你希望背景中有“空的”透明星星）之后，被严格限制。既然@WizardCoder的答案是正确的，并且满足了您的需求，那么您勾选该答案是有意义的。很好：）谢谢，你的答案也是正确的，但我在代码中使用了WizardCoder的答案。是否可以在多个答案中打上正确的勾号？我不认为你可以将多个答案标记为正确（我仍然是这里的noob），但不用担心；我发布了这篇文章，以防你在使用了两组不同的图标（即，你希望背景中有“空的”透明星星）之后，被严格限制。既然@WizardCoder的答案是正确的，并且满足了您的需求，那么您勾选该答案是有意义的。很好：）非常感谢你的回答。你的回答解决了我的问题。非常感谢你的回答。你的回答解决了我的问题。