title: Transition property weird effect on border size on hover
body: <p>I want to have a border-bottom effect on hover.</p>
  <p>I am using transition property on hover, however after the transition-duration is over the border size changes/reduces by a pixel or so, which seems weird. Please help fix this and also would love to know the reason for this effect.</p>
  <p><a href="https://i.stack.imgur.com/QGXr4.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QGXr4.gif" alt="enter image description here" /></a></p>
  <p>HTML -</p>
  <pre><code>&lt;nav class=&quot;navbar&quot;&gt;
     &lt;ul&gt;
       &lt;li&gt;
         Home
       &lt;/li&gt;
  
       &lt;li&gt;
         About us
       &lt;/li&gt;
  
       &lt;li&gt;
         Contact us
       &lt;/li&gt;
     &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  <p>CSS -</p>
  <pre><code>* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }
  
  .navbar {
      width: 90vw;
      margin: 0 auto;
      font-size: 1.2rem;
      background-color: #f1f1f1;
  }
  
  .navbar ul {
      display: flex;
      list-style: none;
      justify-content: center;
  }
  
  .navbar ul li {
      padding: 10px 20px;
      margin: 5px;
      color: #333;
      cursor: pointer;
      border-bottom: 4px solid transparent;
  }
  
  .navbar ul li:hover {
      color: orangered;
      border-bottom: 4px solid orangered;
      transition: all 1s;
  }
  </code></pre>
  <p>Here is the code - <a href="https://codepen.io/rawn01/pen/bGBmBdK" rel="nofollow noreferrer">https://codepen.io/rawn01/pen/bGBmBdK</a></p>