title: Grow line from center out on page load with CSS?
body: <p>I am trying to accomplish the effect from this answer but without the text: <a href="https://stackoverflow.com/questions/28623446/expand-bottom-border-from-center-on-hover">Expand bottom border on hover</a></p>
  
  <p>And know this can be accomplished by growing the entire div from the center as with here: <a href="http://jsfiddle.net/wNXLY/" rel="nofollow noreferrer">http://jsfiddle.net/wNXLY/</a> but have no idea how to create this effect with line (i.e keeping the height static)</p>
  
  <p>I have created my line here: </p>
  
  <pre><code>.line {
      background: white;
      width: 300px;
      top: 10%;
      height: 3.2px;
      margin:auto;
      position: relative;
  }
  </code></pre>
  
  <p>And need to have the line grow from the center on page load. How can I do this?</p>