.hover2 {
  position: relative; /* Required for the ::before pseudo-element */
}

.hover2::before {
  content: '';
  position: absolute;
  width: 100%; /* The underline spans the entire width of the button */
  height: 2px; /* Adjust the thickness of the underline */
  background-color: black; /* The color of the underline */
  bottom: -2px; /* Adjusts the position of the underline */
  left: 0;
  transform-origin: right; /* The origin for the animation */
  transform: scaleX(0); /* Initially, the underline is not visible */
  transition: transform 0.3s ease-in-out; /* Animation when hovering */
}

.hover2:hover::before {
  transform-origin: left; /* Changes the origin for the hover effect */
  transform: scaleX(1); /* Makes the underline visible */
}