它正在工作：你的元素只是在错误的地方被渲染。您需要：

• 将position: relative添加到<a>元素，以及
• 使用0或正像素值作为伪元素的bottom属性，以便它不会被父容器上设置的overflow: hidden截断

.navbar {
  overflow: hidden; 
  background-color: #333;
}

.navbar a {
  position: relative; /* Fix */
  float: left;
  display: block;
  color: #dd5527;
  text-align: center;
  padding: 14px 20px;
  text-decoration: none;
}

.navbar a:after {
  content: "";
  position: absolute;
  background-color: #dd5527;
  height: 3px;
  width: 0;
  left: 0;
  bottom: 0; /* Fix */
  transition: 0.3s;
}

.navbar a:hover::after {
  width: 100%;
}

<div class="navbar">
  <a class="nav-link nav-link-ltr" href="#">Home</a>
  <a class="nav-link nav-link-ltr" href="#">About Us</a>
  <a class="nav-link nav-link-ltr" href="#">Services</a>
</div>

使用transform:scale(0)设置初始比例，然后将transform-origin:left;设置为从左向右变换。然后使用transition:transform 350ms ease-in;来获得过渡动画，最后将transform:scale(1)设置为a:hover::after上的transform:scale(1)以缩放回原始大小。我还为underline和a标签设置了一些样式。我建议你在导航栏上使用display:flex;，而不是在a标签上使用float:left。

.navbar {
  background-color: #333;
  overflow: hidden;
}

.nav-link {
  position: relative;
  display: block;
  float: left;
  padding: 15px 5px;
  margin-right: 30px;
  color: #dd5527;
  text-align: center;
  text-decoration: none;
}

.nav-link::after {
  content: "";
  position: absolute;
  background-color: #dd5527;
  height: 3px;
  width: 100%;
  left: 0;
  bottom: 10px;
  transform: scale(0);
  transition: transform 450ms ease-in;
  transform-origin: left;
}

.nav-link:hover::after {
  transform: scale(1);
}

<div class="navbar">
  <a class="nav-link nav-link-ltr" href="#">Home</a>
  <a class="nav-link nav-link-ltr" href="#">About Us</a>
  <a class="nav-link nav-link-ltr" href="#">Services</a>
</div>