title: How to make a CSS transition work "backwards"?
body: <p>So I have this transition on hover, that makes a border at the bottom of the element that is being hovered over. All is well there, but when the mouse leaves the element, the border simply disappears, while I want it to "retract" back again. <a href="http://codepen.io/anon/pen/aOoMGQ">Codepen</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="object"&gt;
  
  &lt;p&gt;Object&lt;/p&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>* {
  background-color: #222;
  color: white;
  font-family: sans-serif;
  font-size: 30pt;
  }
  
  p {
   width: 200px;
  height: 100%;
  margin-top: 70px;
  text-align: center;
  transition: 0.2s border-bottom;
  -webkit-transition: 0.2s border-bottom;
  margin: auto;
  margin-top: 50px;
  }
  
  p:hover {
    border-bottom: 5px solid white;
  }
  </code></pre>
  
  <p>How would I go about doing this, as simple as possible?
  Thank you ;3</p>