title: Animating bottom border (left to right)
body: <p>I'm trying to get the bottom border to left to right. I also can't seem to position it directly under the title and it animates from the center outwards. I'm not sure what to change.</p>
  
  <p><a href="https://jsfiddle.net/81uo76hx/2/" rel="noreferrer">https://jsfiddle.net/81uo76hx/2/</a></p>
  
  <pre><code>.slider {
  position: absolute;
  display:block;
  left: 50%;
  top:90%;
  transform: translate(-50%, 0);
  position:absolute;
  top:43%;
  margin:0 auto;
  height: 2px;
  background-color: #000;
  width: 0%;
  }
  </code></pre>