Question

我建立了简单的星级评分，以显示在CodePen的推荐页面上，它显示5星可以，但它们不会显示在网页上。在＆＃34; star-wrap＆＃34;之外div没有隐藏。

HTML

<div class="star-wrap">
    <span class="stars">
        <span style="width: 80%" />
     </span>
 </div>

CSS

.star-wrap { width: 100%; margin: 0 auto; text-align: center; }
.stars {
    display: inline-block;
    font-size: 45px;
    position: relative;
    color: #476b8c;

    &:after {
        content: "☆☆☆☆☆";
    }

span {
   display: block;
   position: absolute;
   overflow: hidden;

   &:after {
       content: "★★★★★";
    }
    }
}

JSFIDDLE - 不像在网页上那样工作

CODEPEN - 工作正常

Answer 1

由于codepen支持预处理器代码，而JSFiddle不支持与浏览器相同的预处理器。

但你可以使用编译的CSS

.star-wrap {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
.stars {
  display: inline-block;
  font-size: 45px;
  position: relative;
  color: #476b8c;
}
.stars:after {
  content: "☆☆☆☆☆";
}
.stars span {
  display: block;
  position: absolute;
  overflow: hidden;
}
.stars span:after {
  content: "★★★★★";
}

<div class="star-wrap">
<span class="stars">
  <span style="width: 90%" />
</span>
</div>

星级评分不起作用

1 个答案: