title: Display first letter only
body: <p>Lets say this markup:</p>
  
  <pre><code>&lt;div id="socialMedia"&gt;
      &lt;a class="Twitter"&gt;Twitter&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What i want is only to be visible the first letter of the text (in this case, just a T)</p>
  
  <p>(Actually I won't end up using it but I am curious about this; sure can be helpfull later)</p>
  
  <p>So this was my a attempt:</p>
  
  <pre><code>#socialMedia .Twitter{
      display:none;
  }
  #socialMedia .Twitter:first-letter {
      display: block !important;
  }
  </code></pre>
  
  <p>I was able to check that it won't achieve it. Question is why? and is there some work-around this?</p>
  
  <p>-EDIT-</p>
  
  <p>We are looking for IE=+7/8 version capable solutions..</p>
  
  <p>Salut</p>