title: CSS transition width on :after element
body: <p>I'm having some trouble transitioning the with opening in this element. Here's the <a href="http://jsfiddle.net/Vvscq/1625/" rel="nofollow">fiddle</a>.</p>
  
  <pre><code>#control:after{
      content:"R";
      background-color:#333;
      color:#fff;
      display:inline-block;
      line-height:20px;
      padding:10px;
      height:20px;
      font-weight:bold;
      -webkit-transition: width 2s linear;
      -moz-transition: width 2s linear;
      -ms-transition: width 2s linear;
      -o-transition: width 2s linear;
      transition: width 2s linear;
      font-family:helvetica
  }
  
  #control:hover:after{
      content: "REGGI";
      width:auto;
      cursor:pointer;
  }
  </code></pre>