title: Half star with CSS
body: <p>How can I have the same result (a half star) in IE and Chrome.</p>
  
  <p>In chrome : <a href="http://jsfiddle.net/Auqj8/" rel="noreferrer">http://jsfiddle.net/Auqj8/</a></p>
  
  <pre><code>.star {
      font-size: x-large;
      width: 50px;
      display: inline-block;
      color: gray;
  }
  .star:last-child {
      margin-right: 0;
  }
  .star:before {
      content: '\2605';
  }
  .star.on {
      color: gold;
  }
  .star.half:after {
          content: '\2605';
          color: gold;
          margin-left: -20px;
          width: 10px;
          position: absolute;
          overflow: hidden;
  }
  </code></pre>
  
  <p>In IE: <a href="http://jsfiddle.net/86pqx/" rel="noreferrer">http://jsfiddle.net/86pqx/</a></p>
  
  <p>Thank you.</p>