星级的 CSS

Posted 2023-02-19

【中文标题】星级的 CSS

【英文标题】：CSS for star ratings

【发布时间】：2022-01-01 17:46:03

【问题描述】：

我正在寻找一些 CSS 帮助。

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

原始的 CSS 非常好，甚至允许部分星号。但是，当我使用它时，我只能获得满星！如果您查看下面指向我的博客的链接，那么显示为 4 个整颗星的条目应该是 4.5。有趣的是，如果我输入 0.5，那么就会显示半颗星 - 只有当数字大于 1 时才会出现问题。

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

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

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

【问题讨论】：

***.com/help/minimal-reproducible-example

【参考方案1】：

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

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

对 [data-star]::after 使用以下代码

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

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

【讨论】：

太棒了！那行得通。非常感谢:-)

【参考方案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%;

【讨论】：

非常感谢。这种方法也有效:-)