CSS 星级

Question

我正在寻找一些 CSS 帮助。

我刚刚完成了一次产品评论（对我来说是第一次），我制作了一个小摘要框，其中包含对各个领域的一些评级。我在网上搜索了一些 CSS 可以以久经考验的星号格式显示分数。好的，到目前为止一切顺利。

原版CSS还不错，还可以偏星。但是，当我使用它时，我只能得到满星！如果您查看我博客下方的 link，显示为 4 颗星的条目应该是 4.5。有趣的是，如果我输入 0.5，则会显示半颗星 - 只有当数字 >1 时，问题才会出现。

有人能给我指出正确的方向吗？

Codepen 来源：https://codepen.io/4m6/pen/wvqEzEr

我的post：https://richiesroom.com/aquaplanet-pet-buoyancy-aid/#Head7

CSS:

[data-star] {
  font-style:normal;
  display:inline-block;
  position: relative;
  unicode-bidi: bidi-override;
}
[data-star]::before { 
  display:block;
  content: '★★★★★';
  color: #ddd;
}
[data-star]::after { 
  position:absolute;
  top:0;
  content: '★★★★★';
  width: 0;
  color: orange;
  overflow:hidden;
  height:100%;
}

[data-star^="0.1"]::after,[data-star^=".1"]::after{width:2%}
[data-star^="0.2"]::after,[data-star^=".2"]::after{width:4%}
[data-star^="0.3"]::after,[data-star^=".3"]::after{width:6%}
[data-star^="0.4"]::after,[data-star^=".4"]::after{width:8%}
[data-star^="0.5"]::after,[data-star^=".5"]::after{width:10%}
[data-star^="0.6"]::after,[data-star^=".6"]::after{width:12%}
[data-star^="0.7"]::after,[data-star^=".7"]::after{width:14%}
[data-star^="0.8"]::after,[data-star^=".8"]::after{width:16%}
[data-star^="0.9"]::after,[data-star^=".9"]::after{width:18%}
[data-star^="1"]::after{width:20%}
[data-star^="1.1"]::after{width:22%}
[data-star^="1.2"]::after{width:24%}
[data-star^="1.3"]::after{width:26%}
[data-star^="1.4"]::after{width:28%}
[data-star^="1.5"]::after{width:30%}
[data-star^="1.6"]::after{width:32%}
[data-star^="1.7"]::after{width:34%}
[data-star^="1.8"]::after{width:36%}
[data-star^="1.9"]::after{width:38%}
[data-star^="2"]::after{width:40%}
[data-star^="2.1"]::after{width:42%}
[data-star^="2.2"]::after{width:44%}
[data-star^="2.3"]::after{width:46%}
[data-star^="2.4"]::after{width:48%}
[data-star^="2.5"]::after{width:50%}
[data-star^="2.6"]::after{width:52%}
[data-star^="2.7"]::after{width:54%}
[data-star^="2.8"]::after{width:56%}
[data-star^="2.9"]::after{width:58%}
[data-star^="3"]::after{width:60%}
[data-star^="3.1"]::after{width:62%}
[data-star^="3.2"]::after{width:64%}
[data-star^="3.3"]::after{width:66%}
[data-star^="3.4"]::after{width:68%}
[data-star^="3.5"]::after{width:70%}
[data-star^="3.6"]::after{width:72%}
[data-star^="3.7"]::after{width:74%}
[data-star^="3.8"]::after{width:76%}
[data-star^="3.9"]::after{width:78%}
[data-star^="4"]::after{width:80%}
[data-star^="4.1"]::after{width:82%}
[data-star^="4.2"]::after{width:84%}
[data-star^="4.3"]::after{width:86%}
[data-star^="4.4"]::after{width:88%}
[data-star^="4.5"]::after{width:90%}
[data-star^="4.6"]::after{width:92%}
[data-star^="4.7"]::after{width:94%}
[data-star^="4.8"]::after{width:96%}
[data-star^="4.9"]::after{width:98%}
[data-star^="5"]::after{width:100%}

HTML:

<i data-star="0.5"></i>
<i data-star=".5"></i>
<i data-star="1"></i>
<i data-star="2"></i>
<i data-star="2.8"></i>
<i data-star="3.3"></i>
<i data-star="4.2"></i>

Answer 1

问题是当您保留 4.5 (90%) 时，没有 space 保留该行中的最后一个 *。它转到下一行并将其隐藏。

所以你可以把它放在一行中，把它包装在一个弹性盒子里

为 [data-star]::after

使用以下代码

[data-star]::after {
    position: absolute;
    top: 0;
    content: '★★★★★';
    width: 0;
    color: orange;
    overflow: hidden;
    height: 100%;
    display: flex;
}

这将解决您的问题。只需添加 display:flex

Answer 2

用这个替换你的css，这会起作用：

[data-star] {
  text-align:left;
  font-style:normal;
  display:inline-block;
  position: relative;
  unicode-bidi: bidi-override;
}
[data-star]::before { 
  display:block;
  content: '★★★★★';
  color: #ddd;
}
[data-star]::after {
  white-space:nowrap;
  position:absolute;
  top:0;
  left:0;
  content: '★★★★★';
  width: 0;
  color: orange;
  overflow:hidden;
  height:100%;
}

CSS 星级

CSS for star ratings

html

css

rating