title: CSS transition not working with underline
body: <p>I am using css to make an underline  come under a span:  </p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.un{
      text-decoration:none;
      transition: all .5s ease-in;
  }
  .un:hover{
      text-decoration:underline;
  }  
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;span class="un"&gt; Underlined Text - Or to be underlined &lt;/span&gt;
  </code></pre>
  
  <p>The underline simply appears, it doesn't move in over .5 seconds, like the <code>transition</code> should apply. Why not? How can I make this work?</p>