.menu {
  display: flex;
  list-style: none;
  gap: 20px;
}

.menu a {
  text-decoration: none;
  color: #333;
  font-size: 18px;
  position: relative; /* Важно для позиционирования линии */
  padding-bottom: 5px; /* Отступ для линии */
}

/* Создаем саму линию */
.menu a::after {
  content: '';
  position: absolute;
  width: 0; /* Изначально ширина 0 */
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #AAC83C;
  transition: width 0.3s ease-in-out; /* Плавное изменение ширины */
}

/* При наведении меняем ширину на 100% */
.menu a:hover::after {
  width: 100%;
}