title: How to show only half of bootstrap glyphicon with css
body: <p>I'd like to make a star rating for an item made with glyphicon-star, since it is not possible having glyphs with more than one color, would it be possible to display only half?</p>
  
  <p><img src="https://i.stack.imgur.com/6jDSo.png" alt="half starred"></p>
  
  <p>I'm using bootstrap and I'm working on its source with less.</p>
  
  <p>cheers</p>
  
  <pre><code>    &lt;p&gt;
        &lt;span class="view-stats"&gt;{$post.numviews|number_format:0} views&lt;/span&gt;
        &lt;span class="view-stars pull-right"&gt;
          &lt;span class="glyphicon glyphicon-star star-color"&gt;&lt;/span&gt;
          &lt;span class="glyphicon glyphicon-star star-color"&gt;&lt;/span&gt;
          &lt;span class="glyphicon glyphicon-star star-color"&gt;&lt;/span&gt;
          &lt;span class="glyphicon glyphicon-star star-color"&gt;&lt;/span&gt;
          &lt;span class="glyphicon glyphicon-star star-color" &gt;&lt;/span&gt;
        &lt;/span&gt;
        &amp;nbsp;
      &lt;/p&gt;
  </code></pre>
  
  <p>Thanks, here's the Less snippet</p>
  
  <pre><code> .half {
      position:relative;
  
      &gt;after {
      content:'';
      position:absolute;
      z-index:1;
      background:white;
      width: 50%;
      height: 100%;
      left: 47%;
      }
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/qaFEJ.png" alt="And here&#39;s how it renders"></p>