title: How can I style a part of a single character with overlays using a dynamic width?
body: <h2>Question</h2>
  
  <p>Can I style just a part of a single character?</p>
  
  <h2>Meaning</h2>
  
  <p>CSS attributes cannot be assigned to parts of characters. But if you want to style only a certain section of a character, there is no standardized way to do that.</p>
  
  <h2>Example</h2>
  
  <p>Is it possible to style an "X" which is half-way red and then black?</p>
  
  <p><img src="https://i.stack.imgur.com/Ed894.png" alt="Expected result"></p>
  
  <h2>Not working code</h2>
  
  <pre><code>&lt;div class="content"&gt; 
      X
  &lt;/div&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>.content {
      position: relative;
      font-size: 50px;
      color: black;
  }
  
  .content:after {
      content: 'X';
      color: red;
      width: 50%;
      position: absolute;
      overflow: hidden;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/tYPqb/1/" rel="noreferrer"><strong>Demo on jsFiddle</strong></a></p>
  
  <h2>Purpose</h2>
  
  <p>My intention is styling the Font Awesome <a href="http://fortawesome.github.com/Font-Awesome/#icon/icon-star" rel="noreferrer"><strong><code>icon-star</code></strong></a> symbol. If I have an overlay with dynamic width, shouldn't it be possible to create an exact visualization of scores?</p>