How can I make the line under the links the same size as the text using CSS?

    <div className={styles.container}>
  <ul className={styles.links}>
    <li className={styles.link}>
      <a href="/">Home</a>
    </li>
    <li className={styles.link}>
      <a href="/portfolio">Portfolio</a>
    </li>
    <li className={styles.link}>
      <a href="/skills">Skills</a>
    </li>
    <li className={styles.link}>
      <a href="/contact">Contact</a>
    </li>
  </ul>
</div>

    .link a {
  position: relative;
  display: inline;
}

.link a:hover {
  transition: all 0.3s ease-in-out;
  color: #f8b513;
}

.link a::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  left: 50%; 
  bottom: -3px;
  transform: translateX(-50%) scaleX(0);
  transform-origin: 50% 50%; 
  transition: transform 0.3s ease, width 0.3s ease;
}

.link a:hover::after {
  width: 100%;
  transform: translateX(-50%) scaleX(1); 
}

What I’m trying to do is to make the underline the same size as the text with the effect applied when hover effect is applied on the links.

As seen in the images, the length of the line formed under all of them is 100%. However, I want the line under it to be as long as the word Portfolio, and I want the line under it to be as long as the word home.