Question

我正在建立一个wordpress网站，并在网站上有星级。我使用css和javascript来实现它.Below是代码。

HTML PART

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

STYLE PART

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

SCRIPT PART

<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值更改星形内容的长度。

我想要完成的是添加星形而不填充（'\'\ n'\ n'\ n \'\ _ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \

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获得结果。

如何在CSS中使用两个内容？

2 个答案: