Доверьте продвижение нам

Lion Digital Agency

интернет-маркетинг

теги:

Категории

Рубрики
Настройка и сопровождение рекламного кабинета во Вконтакте.
от 14000 
Услуги SEO копирайтера под ключ. Пишем качественные тексты.
от 950 
SEO-продвижение сайта в ТОП поисковых систем. Рост позиций в первый месяц. Закажите услугу в Lion Digital. Ваш надежный партнер в интернет-маркетинге.
от 25000 

Как сделать линию при наведении 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.

Поделиться:

Комментарии

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Задать вопрос

Оставляя заявку, вы соглашаетесь с политикой обработки персональных данных.

Меню

Оставить заявку

Оставляя заявку, вы соглашаетесь с политикой обработки персональных данных.