title: Border moves text up when hovering
body: <p>I am trying to make the border appear n hover but when I hover it moves the text up by the border size width. I know there's a fix for this I just can't remember it. Can anyone help?
  P.S. Sorry for the rookie question. Only recently started learning.</p>
  <pre class="lang-html prettyprint-override"><code>nav ul li a{
    color: white;
    font-size: 1.8rem;
    font-weight: 700;
    text-decoration: none;
    border: #eee;
    border-bottom: 3px solid transparent;
    transition: 0.2s;
  }
  nav ul li:hover{
    color: white;
    border: #e1e1e1;
    border-bottom: 2px solid #d0d0d0;
  }
  </code></pre>