Как сделать линию при наведении css

Чтобы сделать линию при наведении курсора мыши на элемент, можно использовать псевдоэлементы ::before или ::after и просто задать им стиль линии. Вот пример:

a {
  position: relative; /* устанавливаем позиционирование для создания псевдоэлемента */
}

a:hover::before {
  content: ''; /* добавляем содержимое псевдоэлемента */
  position: absolute;
  bottom: 0; /* устанавливаем позицию линии */
  left: 0;
  width: 100%; /* задаем длину и толщину линии */
  height: 1px;
  background-color: black; /* устанавливаем цвет линии */
}

Здесь мы создаем псевдоэлемент ::before для ссылки <a> и устанавливаем для него позиционирование с помощью свойства position. Затем мы добавляем стиль для линии при наведении курсора мыши на ссылку с помощью псевдокласса :hover. Мы задаем содержимое для псевдоэлемента, его позицию, размеры и цвет линии.

Также можно использовать другие свойства для стилизации псевдоэлементов и получения различных эффектов линий. Например:

a:hover::after {
  content: '';
  position: absolute;
  bottom: 0; 
  left: 0;
  width: 100%; 
  height: 2px; /* увеличиваем толщину линии */
  background: linear-gradient(to right, black, white, black); /* создаем градиентную линию */
  transform: scaleX(0); /* скрываем линию по умолчанию */
  transition: transform 0.3s ease-in-out; /* добавляем анимацию появления линии */
}

a:hover::after {
  transform: scaleX(1); /* показываем линию при наведении */
}

Здесь мы создаем псевдоэлемент ::after и добавляем для него стилизацию линии. Мы используем градиентную заливку для линии, также добавляем анимацию ее появления при наведении курсора мыши на ссылку с помощью свойства transition.