title: CSS width transition not working at all
body: <p>Hi I'm trying to animate the <code>width</code> of the <code>span</code> inside the <code>a</code> of this <code>nav</code></p>
  
  <pre><code>&lt;nav class="navigator"&gt;
     &lt;ul&gt;
      &lt;li&gt;&lt;a href="#home"&gt;H&lt;span&gt;home&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a title="What?" href="#what"&gt;W&lt;span&gt;what&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a title="Porfolio" href="#works"&gt;P&lt;span&gt;works&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a title="Who?" href="#who"&gt;W&lt;span&gt;who&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a title="Where?" href="#where"&gt;W&lt;span&gt;where&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>here it is the <code>CSS</code></p>
  
  <pre><code>header nav ul li a{
      position: relative;
      width: 40px;
      display: block;
      text-decoration: none;
      font-size: 18px;
      color: #000;
  }
  header nav ul li a:hover span{
      width: auto;
      overflow: visible;
      text-align: right;
  }
  header nav ul li a span{
      position: absolute;
      width: 0;
      right: 45px;
      overflow: hidden;
      transition:width 0.25s;
      -webkit-transition:width .25s;
      -moz-transition: width 0.25s;
      font-size: 16px;
  }
  </code></pre>
  
  <p>As you can see I'm trying to animate the <code>width</code>, but, instead of growing gradually the <code>span</code> is only showing up without any <code>transition</code>. 
  To let you figure out the effect that I'm trying to  get check out the <code>nav</code> of this site 
  :<a href="http://kitkat.com/">http://kitkat.com/</a></p>
  
  <p>I made a fiddle of my own <code>nav</code>:<a href="http://jsfiddle.net/ZUhsn/">http://jsfiddle.net/ZUhsn/</a>  where the problem comes out.</p>
  
  <p>Hope I gave you all the information to try to solve my issue.
  Cheers.</p>