title: How to make CSS3 transition working for border-bottom property which starts from bottom to top
body: <p>I have 2 examples below which display 4 links and hovering upon them display border bottom with ease effect.</p>
  
  <p>In the Example 1 the border-bottom display from top-bottom. I have tried revering with the padding property which is there in Example 2, Its not consistent across the browsers and it does not works properly.</p>
  
  <p><strong>Example 1: transition default functionality (transition from top-bottom)</strong>   </p>
  
  <pre><code>  &lt;!DOCTYPE html&gt;&lt;html class=''&gt;
    &lt;head&gt;
  
    &lt;style class="cp-pen-styles"&gt;
    body {
      padding: 50px;
    }
  
    a, a:hover {
      text-decoration: none;
    }
  
    li {
      position: relative;
      padding-bottom: 3px;
      margin-right: 10px;
      display: inline;
    }
  
    li a {
      border-bottom: 0em solid transperant;
      color: #777;
    }
  
    li:focus &gt; a,
    li:hover &gt; a,
    li:active &gt; a {
        border-bottom: 0.313em solid #206E9F;
        transition: border-bottom .2s ease-in-out;
        -webkit-transition: border-bottom .2s ease-in-out;
        -moz-transition: border-bottom .2s ease-in-out;
        -ms-transition: border-bottom .2s ease-in-out;
    }
  |
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#home"&gt;HOME&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#page"&gt;PAGE&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#about"&gt;ABOUT US&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#contact-me"&gt;CONTACT US&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  
  
    &lt;/body&gt;
    &lt;/html&gt;
  </code></pre>
  
  <p><strong>Example 2: transition from bottom-top (using padding - Compatibility issue with IE browser)</strong>      </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;&lt;html class=''&gt;
  
  &lt;head&gt;
  
  &lt;style class="cp-pen-styles"&gt;
  body {
    padding: 50px;
  }
  
  a, a:hover {
    text-decoration: none;
  }
  
  li {
      position: relative;
      padding-bottom: 3px;
      margin-right: 10px;
      display: inline;
  }
  
  li a {
      color: #777;
      padding-bottom:0.4em;
      border-bottom: 0em solid transperant;
  }
  
  li:focus &gt; a,
  li:hover &gt; a,
  li:active &gt; a {
      padding-bottom:0em;
      border-bottom: 0.313em solid #206E9F;
      transition: all .2s ease-in;
      -webkit-transition: all .2s ease-in;
      -moz-transition: all .2s ease-in;
      -ms-transition: all .2s ease-in;
  }
  
  &lt;/style&gt;&lt;/head&gt;&lt;body&gt;
  
  
  &lt;ul&gt;
    &lt;li&gt;&lt;a href="#home"&gt;HOME&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#page"&gt;PAGE&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#about"&gt;ABOUT US&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#contact-me"&gt;CONTACT US&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  
  &lt;/body&gt;&lt;/html&gt;
  </code></pre>
  
  <p>How to make CSS3 transition working for border-bottom property which starts from bottom to top. </p>