title: Underline :after effect leave a pixel even when width go back to 0px
body: <p>this is my code:</p>
  <pre><code> .menu_item::after{
              content: &quot;&quot;;
              display: block;
              background-color: black !important;
              width: 0px;
              height: 2px;
              transition: width 0.5s;
          }
          
   .menu_item:hover::after{
              width: 100%;
          }
          
   .menu_item.active::after{
              width: 100%;
          }
  </code></pre>
  <p>It simply make a underline-like effect transition by make the width of the ::after content go from 0 to 100%, so indeed when the mouse leave the .menu_item the width go back from 100% to 0.
  The problem is, the underline stay on 1px for some seconds after it goes back from 100% to 0px, and it's very unpleasant to see.
  Is there something i can do or it's a thing i have to keep?</p>
  <p><a href="https://i.stack.imgur.com/01G2i.png" rel="nofollow noreferrer">The problem appears under &quot;Qualcosa su di me&quot;</a></p>