代码之家 › 专栏 › 技术社区 › Christian Luneborg

星级评定不起作用

less css-selectors css html

-2

Christian Luneborg · 技术社区 · 7 年前

我建立了简单的星级评分,显示在CodePen的推荐页面上,它可以显示5颗星,但不会显示在网页上。“星形包裹”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 -工作正常

1 回复 | 直到 7 年前

user7847084 user7847084 7 年前

因为codepen支持预处理器代码,而JSFIDLE不支持与浏览器相同的预处理器。

但您可以使用编译的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>

推荐文章

Monica · 使用Selenium和Python在没有url的情况下单击下载文件

2 年前

Kevin Rodgers Jr. · Python BeautifulSoup:在in select语句中排除其他标记

2 年前

Arad · 即使使用相同的选择器,外部样式表也会覆盖内部样式表

7 年前

user1032531 · jQuery Validate require\u from\u group并按名称选择

7 年前

Christian Luneborg · 星级评定不起作用

7 年前

Gabriel Morais · CSS未应用媒体查询

7 年前

Kevin · CSS属性选择器中的“i”是什么意思?[副本]

7 年前

S syed · 如何在javascript中删除DIV标记内的CSS类?[副本]

7 年前

Karos papermoon · Div和定位问题

7 年前

user9549074 · 如何从CSS中的输入文本中设置最后一个字符的样式?

7 年前