如何在 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的值改变了星星内容的长度。

我想要完成的是在没有填充的星星（'\2606'）的正下方添加星星，填充（'\2605'）来完成这样的事情。

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>

Answer 2

如果您想主要通过图标内容来驱动星星的外观，出于样式原因，您可以这样做：

body {
    background: gold
}
.icons::before, .icons::after {
    font-size: 32px;
    position: absolute;
    left: 20;
    overflow: hidden;
    white-space: nowrap;
}
.icons::before{
    content: "\2606\2606\2606\2606\2606";
}
.icons::after {
    content: "\2605\2605\2605\2605\2605";
    width: 93px;
}

<div class="icons"> </div>

顺便说一句，这个问题与the one posted here 非常非常相似，我在写答案时遇到了这个问题。

我留下这个的唯一原因是，如果您只对通过同一 html 元素的CSS Pseudo-Elements 实现结果感兴趣。