title: Only fill 60 percent star using css width
body: <p>When I am try <code>style=width:60%</code> to <code>.rating</code> 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 ?</p>
  
  <p>My html code:</p>
  
  <pre><code>&lt;div class="star"&gt;
     &lt;div class="rating" style="width:60%"&gt;
        &lt;span&gt;&amp;#9734;&lt;/span&gt;
        &lt;span&gt;&amp;#9734;&lt;/span&gt;
        &lt;span&gt;&amp;#9734;&lt;/span&gt;
        &lt;span&gt;&amp;#9734;&lt;/span&gt;
        &lt;span&gt;&amp;#9734;&lt;/span&gt; 
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My css code:</p>
  
  <pre><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;
   }
  </code></pre>
  
  <p>CHECK <a href="http://jsfiddle.net/fkmmzdc6" rel="noreferrer">fiddle link</a>  </p>