CSS for star ratings-CodePudding

I'm looking for some CSS help.

I've just done a product review (a first for me) and I made a little summary box that included some ratings for various areas. I searched online for some CSS that would show scores in the tried and tested star format. OK, so far so good.

The original CSS is pretty good and even allows for partial stars. However, when I use it I can only get full stars! If you look at the link below to my blog the entries that are showing as 4 whole stars should be 4.5. Interestingly, if I put 0.5 then that half a star will show - it's just when the figures are >1 that the issue arises.

Would somebody be able to point me in the right direction?

Codepen source: https://codepen.io/4m6/pen/wvqEzEr

My 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>

CodePudding user response：

The issue is when you keep 4.5 (90%) there are no space to keep last * in that row. It goes to next line and hide it.

So you can keep it in one line wrapping it in to a flex box

use below code for the [data-star]::after

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

This will fixed your issue. just add display:flex

CodePudding user response：

replace your css with this, this will work:

[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%;
}