title: How to animate border transition expand with CSS?
body: <p>I'm trying to create a CSS transition where the <code>border-bottom</code> of <code>a href</code> element expands on <code>:hover</code> to the width of the link.</p>
  
  <p>What I could find is a CSS solution where the <code>background width</code> is animated:
  <a href="http://jsfiddle.net/mfn5nefb/82/" rel="nofollow">http://jsfiddle.net/mfn5nefb/82/</a></p>
  
  <p>But that's not what I want, because after click on a navigation tab I want to leave the border as is. So I'd have to directly animate the border, instead of the background.</p>
  
  <pre><code>&lt;!-- assume the border-bottom is only applied to an active=clicked navigation tab --&gt;
  &lt;h1 style="border-bottom: 3px solid green;"&gt;CSS IS AWESOME&lt;/h1&gt;
  
  h1 {
      color: #666;
      position: relative;
      display: inline-block;
  }
  
  h1:after {
      position: absolute;
      left: 50%;
      content: '';
      height: 40px;
      height: 5px;
      background: #f00;
      transition: all 0.5s linear;
      width: 0;
      bottom: 0;  
  }
  
  h1:hover:after {
      width: 270px;
      margin-left: -135px;
  }
  </code></pre>
  
  <p>Here you see the "active" link gets a green border. And on hover I'd like to animate the other tabs, but the border itself. Currently the background is animated, which appears <em>above</em> the border and thus looks misaligned.</p>