Only fill 60 percent of the stars using css width

Question

When I use the style=width:60%to class .rating, the gold color should be filled with only 3 stars, and the rest of the stars should be empty, but this does not work. Please help me what is my mistake?

My html code is:

<div class="star">
   <div class="rating" style="width:60%">
      <span>&#9734;</span>
      <span>&#9734;</span>
      <span>&#9734;</span>
      <span>&#9734;</span>
      <span>&#9734;</span> 
   </div>
</div>

My css code:

.star{ width:200px; position: relative;color: #bdbdbd;}

.rating span
 {   
    font-size:30px;
    margin-left:-4px;
    white-space: nowrap;
    overflow: hidden;
 }

.rating  span:before { 
 content:"\2605";
 position: absolute;
 color:gold;
 }

CHECK violin link

Answer 1

This is what I used to use. This works pretty well - you can even fill part of the star ...

https://jsfiddle.net/4qqspqxh/

.ratings {
  position: relative;
  vertical-align: middle;
  display: inline-block;
  color: #b1b1b1;
  overflow: hidden;
}

.full-stars{
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  overflow: hidden;
  color: #fde16d;
}

.empty-stars:before,
.full-stars:before {
  content: "\2605\2605\2605\2605\2605";
  font-size: 14pt;
}

.empty-stars:before {
  -webkit-text-stroke: 1px #848484;
}

.full-stars:before {
  -webkit-text-stroke: 1px orange;
}

/* Webkit-text-stroke is not supported on firefox or IE */
/* Firefox */
@-moz-document url-prefix() {
  .full-stars{
    color: #ECBE24;
  }
}
/* IE */
<!--[if IE]>
  .full-stars{
    color: #ECBE24;
  }
<![endif]-->

<div class="ratings">
  <div class="empty-stars"></div>
  <div class="full-stars" style="width:70%"></div>
</div>

Run codeHide result

Answer 2

. 30px, 150px, 200px. , overflow: hidden;. :

.star{ width:150px; position: relative;color: #bdbdbd;}

.rating {
  width:60%;
  overflow: hidden;
  white-space: nowrap;
}

.rating span{
  font-size:30px;
  white-space: nowrap;
  overflow: hidden;
  color: gold;
}

.rating span:before { 
  content:"\2606\2606\2606\2606\2606";
  position: absolute;
  color: #bdbdbd;
  z-index: -1;
}

<div class="star">
   <div class="rating">
      <span>&#x2605;&#x2605;&#x2605;&#x2605;&#x2605;</span>
   </div>
</div>

Hide result

: 30 IE, 150 . Chrome 25 , 125 . , , , display: inner-block; width: 30px;.