.underline {
  position: relative;
  text-decoration: none;
}

.underline::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  height: 1px;
  background: currentColor;
  width: 100%;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
}

.underline:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}