使用宽度定义的字体真棒星级

Question

目前,对于评论,我使用css与背景类显示的星级评分.
但我想用Font Awesome替换它,因为在高分辨率屏幕上字体更加清晰.

唯一的问题是评级是由%的宽度类动态定义的.
我无法将代码更改为定义宽度的不同div类.

例如,使用该类显示4,5星的分数 width="80%;"

最高分为5星.

它应该如下所示:

如何用Font Awesome星代替它？

另见这个JSFiddle:https://jsfiddle.net/tLj2ybnu/8/

Answer 1

这个答案包括两个解决方案 第一个是纯CSS.您只需设置一个类来指示从0到10的分数.第二个代码段更简单,更灵活; 它允许您在标签本身中设置百分比.

在这两个示例中,我使用了Wingdings字体中的星号,但您可以使用其他字体和字符甚至是背景图像.两种情况下的解决方案是使用星星的灰色背景和剪裁到正确宽度的金色叠加层.

1:预定义类,用于指示0到10之间的值

我想只需要一点CSS就可以做到这一点.您可以使用特殊字体,但也许Wingdings也是一种选择.它包含一些你可能会使用的星星.

下面的代码段显示您只能使用一个元素执行此操作.添加类score和类之一s0,以s10指示从0分至10.当然,而是采用::before和::after伪元素,你可以添加嵌套的跨度,让黄色的80%的宽度在样式属性,但在我的例子中,得分元素与它的显示方式更加分离,我认为这是一种更好的方法.

CSS非常冗长,但是使用像SCSS这样的预处理器,你可以用更紧凑的方式编写它.

我会选择一到十,因为你表示你也想要半星(这很常见).通过使用10的缩放,您可以使用整数值,从程序员的角度来看,这更直观.你只有一个整数分数,然后由CSS翻译成半星.

当然,您可以使用任何字体的任何符号来执行此操作.

.score {
  display: inline-block;
  font-family: Wingdings;
  font-size: 30px;
  color: #ccc;
  position: relative;
}
.score::before,
.score::after {
  content: "\2605\2605\2605\2605\2605";
  display: block;
}
.score::after {
  color: gold;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.score.s0::after {
  width: 0%;
}
.score.s1::after {
  width: 10%;
}
.score.s2::after {
  width: 20%;
}
.score.s3::after {
  width: 30%;
}
.score.s4::after {
  width: 40%;
}
.score.s5::after {
  width: 50%;
}
.score.s6::after {
  width: 60%;
}
.score.s7::after {
  width: 70%;
}
.score.s8::after {
  width: 80%;
}
.score.s9::after {
  width: 90%;
}
.score.s10::after {
  width: 100%;
}

The score is: <span class="score s7"></span>

2:在标签中直接设置百分比

如果要专门在HTML中设置宽度,则不能使用::before和::after.你需要一个实际的元素.实际上,它使CSS更容易,因为您不需要预定义宽度.HTML也不是很复杂.得分的范围得到一个只有宽度设置的匿名子元素.您可以指定0到100%之间的任何宽度.

外部元素(带有类)用作容器,并生成灰色星星.内部元素生成覆盖在灰色上的黄色星星.

.score {
  display: inline-block;
  font-family: Wingdings;
  font-size: 30px;
  color: #ccc;
  position: relative;
}
.score::before,
.score span::before{
  content: "\2605\2605\2605\2605\2605";
  display: block;
}
.score span {
  color: gold;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

The score is: <span class="score"><span style="width: 88%"></span></span>