why psudeo after element's width is not relative to its parents width?

I am trying to add a underline like symbol below the active link for that purpose i am used ::after element and set it’s width to 100% to get its parent element’s width but the psudo element is way much bigger when width is 100%;

my html code is 👇

<header class="main-header">
  <a class="category-name">
    <span> Sneakers </span>
  </a>
  <nav class="main-nav">
    <ul class="main-nav-list">
      <li class="m">
        <a class="main-nav-link" href="#how">Collections</a>
      </li>
      <li><a class="main-nav-link" href="#meals">Men</a></li>
      <li>
        <a class="main-nav-link" href="#testimonials">Women</a>
      </li>
      <li><a class="main-nav-link" href="#pricing">About</a></li>
      <li><a class="main-nav-link nav-cta" href="#cta">Contact</a></li>
    </ul>
  </nav>
  <ul class="my__ac-list">
    <li class="nav--cart_icon" id="cartBtn">
      <a href="#" class="cart-icon"
        ><img src="./images/icon-cart.svg" alt="cart icon" srcset=""
      /></a>
      <p class="cart--strip">3</p>
    </li>
    <li>
      <a href="#">
        <img
          class="profile-thumbnail"
          src="./images/image-avatar.png"
          alt="image-avatar"
          srcset=""
        />
      </a>
    </li>
  </ul>
</header>

my css code is bit lengthier i couldnot format correctly so i have created code containg my html and css

codepen link = https://codepen.io/sinan-m/pen/abKQaxp

i want to add a underline below the active navigation link like in design

my design image https://github.com/front-end-mentor-works/e-com-product-page/blob/main/design/active-states-basket-filled.jpg

>Solution :

.main-nav-list li.m for this selector you need to add position: relative. Beacause right now the after pseudoelement is not positioned relative to the li element.

position: absolute;

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).

However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.

Because you didn’t set position:relative on the li, he after element takes the width of the window browser. That’s why when set to 100%, it’s so wide.