.custom-underline-btn {
  position: relative;
  display: inline-block; /* чтобы псевдоэлемент позиционировался правильно */
  text-decoration: none; /* убираем стандартное подчеркивание */
  color: inherit; /* цвет текста не меняется */
}

.custom-underline-btn::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px; /* отступ под текстом, можешь подкорректировать */
  width: 100%;
  height: 2px; /* толщина линии */
  background-color: currentColor; /* цвет линии такой же как у текста */
  transform: scaleX(0); /* линия спрятана */
  transform-origin: left;
  transition: transform 0.3s ease;
}

.custom-underline-btn:hover::after {
  transform: scaleX(1); /* при наведении линия появляется плавно */
}