<nav>
  <a href="#">From Center</a>

  <a href="#" class="from-left">From Left</a>

  <a href="#" class="from-right">From Right</a>
</nav>

nav {
  display: inline-flex;
  flex-direction: row;
  gap: 2rem;
}

a {
  display: inline-block;
  text-decoration: none;
  color: black;
  font-family: sans-serif;
}

a:after {
  display:block;
  content: '';
  width: inherit;
  border-bottom: solid 3px black;  
  transform: scaleX(0);  
  transition: transform 250ms ease-in-out;
}

a:hover:after { transform: scaleX(1); }

a.from-left:after {
  transform-origin: left;
}

a.from-right:after {
  transform-origin: right;
}