Supprimez simplement overflow: hidden; et cela fonctionnera comme un charme. Voici un exemple pour 4/5.

<div class="star-ratings-css">
  <div class="star-ratings-css-bottom"></div>
  <div class="star-ratings-css-top" style="width: 31%"></div>
</div>

.star-ratings-css {
  width: 100px;
}
.star-ratings-css-top {
    display: block;
     height: 22px;
    position: relative;
}
.star-ratings-css-bottom::before  {
    color: #167ac6;
    content: "★★★★★";
    font-size: 22px;
    position: absolute;
}
.star-ratings-css-top::before  {
    color: #f4b414;
    content: "★★★★";
    font-size: 22px;
    position: relative;
}

Icônes de classement par étoiles

Le code est trop compliqué et peut être facilement fait avec de meilleures balises que les

s et peut également être interactif.

HTML

Les deux types de balises utilisées dans la démo suivante sont:

<label for='s0' class='void'>&nbsp;&nbsp;&nbsp;</label>
<input id='s0' name='rad' type='radio' value='0'>
<label for='s1' class='star'>&#9733;</label>
<input id='s1' name='rad' type='radio' value='1'>
<label for='s2' class='star'>&#9733;</label>
<input id='s2' name='rad' type='radio' value='2'>
<label for='s3' class='star'>&#9733;</label>
<input id='s3' name='rad' type='radio' value='3'>
<label for='s4' class='star'>&#9733;</label>
<input id='s4' name='rad' type='radio' value='4'>
<label for='s5' class='star'>&#9733;</label>
<input id='s5' name='rad' type='radio' value='5' checked>
<label for='s0' class='void'>&nbsp;&nbsp;&nbsp;</label>

et

[name=rad] {
  display: none
}

label {
  display: inline-block;
  outline: 0;
  font-size: 10vh;
  line-height: 1;
  color: gold;
  background: none;
  transition: 0.6s;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
}

[name=rad]:checked~.star {
  color: navy;
  transition: 0.6s;
}

#s0:checked~.star {
  color: navy;
  transition: 0.6s;
}

[name=rad]+label.star:hover {
  color: cyan;
  transition: 0.4s;
}

[name=rad]+label.star:active {
  color: tomato;
  transition: 0.4s;
}

Il y a une entrée et une étiquette pour chaque icône étoile, l ' ID de l'entrée correspond à l' étiquette [for] attribut. Lorsqu'une paire input / label est configurée de cette façon, elles sont associées de telle sorte que lorsque l'on clique sur l'un, l'autre est également cliqué. Toutes les entrées seront masquées et toutes les étiquettes seront stylisées.

---

CSS

Chaque entrée sera suivie du label:

 [name='rad']:checked ~ .star { `color: navy` }

Donc, quand ce jeu de règles est en CSS:

<label for='ID3' class='star'>★</label> // 1. User clicks

<input id='ID3' name='rad' type='radio'> // 2. Which puts this as: [name='rad']:checked

<label for='ID4' class='star'>★</label> /* 3. Any labels that occur from this point on
will be styled: ~ .star {color:navy}*/

<input id='ID4' name='rad' type='radio'>

<label for='ID5' class='star'>★</label>

il stylera les étoiles dans deux états: couleur: or par défaut (activé) ou couleur: bleu marine (désactivé).

---

Démo

Cliquez sur une étoile et toutes les étoiles à sa droite s'éteindront. Cliquez à l'extrémité gauche ou droite où il n'y a pas d'étoiles et toutes les étoiles seront désactivées.

<label for='ID' class='star'>★</label>

<input id='ID' name='rad' type='radio'>

Vous pouvez utiliser la position absolue pour les sélecteurs : before et : after .

<div class="star-ratings-css">
  <div class="star-ratings-css-bottom"></div>
  <div class="star-ratings-css-top" style="width: 31%"></div>

</div>

.star-ratings-css {
  width: 100px;
}
.star-ratings-css-top {
      display: block;
     height: 22px;
    position: relative;
    overflow: hidden;
}
.star-ratings-css-bottom::before  {
color: #167ac6;
    content: "★★★★★";
    font-size: 22px;
    position:absolute;top:0;left:8px
}
.star-ratings-css-top::before  {
    color: #f4b414;
    content: "★★★★★";
    font-size: 22px;
    position:absolute;top:-8px;left:0
}

Essayez la fonction "Inspecter" du navigateur Chrome pour ajuster les paramètres CSS à ce que vous voulez afficher.

Les deux premières étoiles ont été rendues toutes jaunes avec les modifications suivantes.

• Supprimer: "height: 22px;" depuis .start-notes-css-top :: avant
• Remplacez: style = "width: 31%" par style = "width: 35%"

Une autre option pour obtenir seulement deux (2) étoiles jaunes est ...

• Supprimer: "height: 22px;" depuis .start-reatings-css-top
• Supprimer: style = "width: 31%"
• Modification: contenu: "★★"; pour .start-ratings-css-top :: before

Vous pouvez simplifier votre code en utilisant un élément

<div class="star-ratings-css" style="--p:20%;"></div>
<br>
<div class="star-ratings-css" style="--p:50%;"></div>
<br>
<div class="star-ratings-css"></div>

.star-ratings-css {
  display: inline-block;
  position: relative;
  font-size: 22px;
}

.star-ratings-css::before {
  color: #167ac6;
  content: "★★★★★";
}

.star-ratings-css::after {
  color: #f4b414;
  content: "★★★★★";
  position: absolute;
  top: 0;
  left: 0;
  width: var(--p, 100%);
  overflow: hidden;
  white-space:nowrap;
}

Il y a quelques problèmes avec votre exemple:

• L'élément supérieur fait 31% de 100 pixels mais les étoiles ont une largeur différente. Si vous définissez la largeur à 50%, il n'affichera pas 2½ étoiles!

• Vous définissez une hauteur de 22px sur l'élément du haut et qui est plus courte que la hauteur réelle de l'élément du bas (22px * hauteur de la ligne = ~ 30px) qui est le problème dont vous parlez. p >

Vous pouvez utiliser display: inline-block pour étirer le conteneur au contenu, c'est-à-dire à la largeur réelle de cinq étoiles. Cela fera en sorte que les largeurs de pourcentage correspondent au nombre (ou fraction) d'étoiles correct. Et supprimez la hauteur: 22px . Le code simplifié ressemblerait à ceci:

<div class="star-ratings-css">
  <div class="star-ratings-inner" style="width: 31%"></div>
</div>

.star-ratings-css {
  display: inline-block;
  position: relative;
  font-size: 22px;
}

.star-ratings-inner {
  position: absolute;
  overflow: hidden;
}

.star-ratings-inner::after {
  color: #f4b414;
  content: "★★★★★";
}

.star-ratings-css::after {
  color: #167ac6;
  content: "★★★★★";
}