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

Issue

    <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.

Solution

One option is to wrap the text in a span and then use the pseudo-element on that. .link a span::after

ul {
  list-style:none;
  display: flex;
    margin:0;
    padding:0;
}
li {

  flex:1;
}

a {
  display: block;
  text-decoration: none;
  border:1px solid red;
  text-align:center;

}

span {
  position: relative;;
}

span:after {
  content:"";
  position: absolute;
  bottom: -3px;
  left:0;
  width: 0%;
  height: 5px;
  background: #000;
  transition: width .33s ease;
}

a:hover span:after {
  width: 100%;
}

<ul>
  <li><a href="/"><span>Lorem.</span></a></li>
  <li><a href="/"><span>Lorem, ipsum.</span></a></li>
  <li><a href="/"><span>Item 3</span></a></li>
  <li><a href="/"><span>Item 4</span></a></li>
  <li><a href="/"><span>Item 5</span></a></li>
</ul>

Answered By - Paulie_D