title: How to make border-bottom animation & ignore padding
body: <p>I'm trying to make a navigation bar with a border-bottom as the hover effect which purpose is to follow the user mouseover and highlight the item. However, the border-bottom is including the padding of its parent, which I don't like. Using <code>padding: 0px;</code> doesn't do it.</p>
  
  <p>Here's what I've got so far, bear with me since I'm fairly new to HTML &amp; CSS and this is my first time making a website: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*{
   padding: 0px;
   margin: 0px;
  }
  #navdiv ul {
   width: 100%;
   height: 80px;
   line-height: 80px;
   vertical-align: middle;
   background: #333;
   margin-top: 5px;
  }
  #container {
   margin-left: 200px;
   margin-right: 200px;
  }
  #navdiv ul a {
   width: 80%;
   text-decoration: none;
   color: #f2f2f2;
   padding: 15px;
   font-size: 16px;
  }
  #navdiv ul li {
   height: 63px;
   list-style-type: none;
   float: right;
  }
  #navdiv ul li:hover {
   border-bottom: 5px solid #FF9933;
   transition: all 0.3s ease-in-out;
  }
  #highlight {
   display: inline-block;
   line-height: 1em;
   padding: 0;
   border-bottom: 5px solid #FF9933;
  }
  #navdiv img {
   width: auto;
   height: auto;
   max-width: 100%;
   max-height: 60px;
   vertical-align: middle;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav&gt;
    &lt;div id="Maindiv"&gt;
      &lt;div id="navdiv"&gt;
        &lt;ul&gt;
          &lt;div id="container"&gt;
            &lt;a href="../index.html"&gt;&lt;img src="../img/menu-logo.png" alt="Menu Logo"&gt;&lt;/a&gt;
            &lt;li&gt;&lt;a href="../item4/index.html"&gt;Item 4&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="../item3/index.html"&gt;Item 3&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="../item2/index.html"&gt;Item 2&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="../item1/index.html" id="highlight"&gt;Item 1&lt;/a&gt;&lt;/li&gt;
          &lt;/div&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you can see, the orange border-bottom is taking "Item 1" padding which is making the border-bottom larger than it's content, which I find it ugly and I would like to fix it.</p>
  
  <p>While at it, is there a way to make the border-bottom animation come from the left to right? If so, is there also a way to make it "smart" enough to know that if the user's cursor comes from the left of the item, it should animate from "left to right" and if the cursor comes from the right animate it from "right to left" accordingly?</p>
  
  <p>I would also love to make it follow the user cursor instead of instantly disappearing after leaving the previous item and immediately appearing once the next item is hovered.</p>
  
  <p>Sorry for the long post, I've got so many questions and so little luck while troubleshooting using google with the little knowledge that I know. </p>
  
  <p>Massive thanks!
  - Kay.</p>