Only fill 60 percent star using css width

Question

When I am try style=width:60% to .rating class, gold color should be fill up only 3 stars and rest of stars should be blank but it does not work. Please help me what is my mistake ?

My html code:

<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 fiddle link

Answer 1

This is what I have previously used. This works quite nicely - you can even have a fraction of a star filled out...

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> 

Answer 2

You need to swap your gray and gold starts. Each star is 30px, so the total size is 150px, not 200px. To prevent the starts from wrapping to the next line, use overflow: hidden; . Try this:

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

Note: the width of each star is 30px in IE, so the total width is 150px. However, in Chrome the width of the star is 25px, so the total width is 125px. To solve this, so your percentage works across the browsers, you will need to specify the width of each star using display: inner-block; width: 30px; display: inner-block; width: 30px; .