Чтобы создать подчеркивание при наведении CSS-анимации из центра, вы можете использовать различные методы. Вот некоторые из них:

Метод 1: использование псевдоэлементов
HTML:

<div class="underline-container">
  <span class="underline-text">Hover Me</span>
</div>

CSS:

«»;
позиция: абсолютная;
слева: 50%;
снизу: 0;
ширина: 0;
высота: 2 пикселя;
цвет фона: черный ;
переход: ширина 0,3 секунды;
преобразование: translateX(-50%);
}
.underline-container:hover::before {
ширина: 100%;

Метод 2: использование преобразования и перехода
HTML:

<div class="underline-container">
  <span class="underline-text">Hover Me</span>
  <span class="underline"></span>
</div>

CSS:

.underline-container {
  display: inline-block;
  position: relative;
}
.underline-text {
  position: relative;
  z-index: 2;
}
.underline {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background-color: black;
  transition: width 0.3s ease;
  transform: translateX(-50%);
}
.underline-container:hover .underline {
  width: 100%;
}

Метод 3: использование SVG
HTML:

<div class="underline-container">
  <span class="underline-text">Hover Me</span>
  <svg class="underline" width="100%" height="2">
    <line x1="0" y1="0" x2="100%" y2="0" stroke="black" stroke-width="2" />
  </svg>
</div>

CSS:

.underline-container {
  display: inline-block;
  position: relative;
}
.underline-text {
  position: relative;
  z-index: 2;
}
.underline {
  position: absolute;
  bottom: 0;
  width: 0;
  height: 2px;
  transition: width 0.3s ease;
}
.underline-container:hover .underline {
  width: 100%;
}

Эти методы создают анимацию подчеркивания, которая расширяется от центра при наведении курсора мыши. Не стесняйтесь настраивать стили и анимацию в соответствии со своими потребностями.