title: On hover the after element should only be visible on one element at a time but instead is treating them as one
body: <p>On hover I would like each icon to have an underline but instead all items are get an underline. I'm not sure how to get it to apply for only the icon that is being hovered.</p>
  <p>I want something like this
  <a href="https://i.stack.imgur.com/cb7c2.png" rel="nofollow noreferrer">hovered icon</a></p>
  <p>but instead it looks like this</p>
  <p><a href="https://i.stack.imgur.com/WSVFR.png" rel="nofollow noreferrer">my hovered image</a></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>.top-bar {
    display: flex;
    align-items: center;
    padding: 1.25rem 2rem;
  }
  
  .menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.5rem;
    width: 2.5rem;
  }
  
  .fa-bars {
    font-size: 2.5rem;
  }
  
  .logo {
    margin-left: 1rem;
  }
  
  .logo img {
    display: block;
    width: 10rem;
    height: 1.66rem;
    color: #000;
  }
  
  
  .controls {
    position: relative;
    font-size: 2rem;
    margin-left: auto;
    margin-right: 3rem;
  }
  
  
  .controls-icon::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.5rem;
    height: 0.2rem;
    width: 100%;
    background-color: #000;
    transition: all 0.5s;
    transform: scaleX(0);
  }
  
  
  .controls-icon:hover::after {
    transform: scale(1);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet"/&gt;
  &lt;div class="top-bar container"&gt;
          &lt;div class="menu-btn"&gt;&lt;i class="fa-solid fa-bars"&gt;&lt;/i&gt;&lt;/div&gt;
          &lt;div class="logo"&gt;&lt;img src="assets/img/logo.svg" alt="logo" /&gt;&lt;/div&gt;
          &lt;div class="controls"&gt;
            &lt;i class="fa-solid fa-magnifying-glass controls-icon"&gt;&lt;/i&gt;
            &lt;i class="fa-solid fa-play controls-icon"&gt;&lt;/i&gt;
            &lt;i class="fa-solid fa-user controls-icon"&gt;&lt;/i&gt;
          &lt;/div&gt;
        &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>