title: Reverse direction of css transition
body: <p>When I hover over the anchor tag <code>&lt;a&gt;</code>, the <code>border-bottom</code> appears from top to bottom, how to reverse it so the <code>border-bottom</code> appear from bottom to top?</p>
  
  <p>My current style:</p>
  
  <pre><code>a {
      display: inline-block;
      transition: border .5s ease-in-out;
  }
  
  a:hover {
      border-bottom: 4px solid ;
  }
  </code></pre>