0

Ваш заказ

Лого moguta.ru

Плавное подчёркивание ссылки при наведении

Плавное подчёркивание ссылки при наведении

Сегодня мы анонсируем новую серию статей, в которой мы покажем вам, как можно быстро и без особых усилий «прокачать» ваш сайт. Мы будем выкладывать маленькие кусочки кода(сниппеты), которые будут работать сразу после того, как вы вставите их в ваш файл стилей.

В этой статье мы расскажем вам как добиться такого эффекта, как плавное подчеркивание ссылки при наведении css средствами. Выглядеть это будет так:
Наведите курсор на ссылку
a {
	position: relative;
	color: #00a650; /*задаём цвет ссылки*/
	cursor: pointer;
	line-height: 1; /*задаём высоту строки*/
	text-decoration: none; /*убираем подчёркивание*/

}
a:after {
	display: block;
	position: absolute;
	left: 0; /*изменить на right:0;, чтобы изменить направление подчёркивания */
	width: 0;/*задаём длинну линии до наведения курсора*/
	height: 2px; /*задаём ширину линии*/
	background-color: #00a650; /*задаём цвет линии*/
	content: "";
	transition: width 0.3s ease-out; /*задаём время анимации*/
}

a:hover:after,
a:focus:after {
	width: 100%; /*устанавливаем значение 100% чтобы ссылка подчёркивалась полностью*/
}

Плавное подчёркивание ссылки справа налево при наведении

достаточно изменить left:0 на right:0;

Применяем плавное подчеркивание ссылок при наведении к нашему стандартному шаблону.

плавное подчёркивание ссылки при наведении пример



Делаем это из административной панели:

плавное подчёркивание ссылок при наведении в шаблоне могута

  1. Открываем настройки
  2. Выбираем шаблон
  3. Открываем Style.css
  4. В самый конец кода добавляем 
.bottom-bar .main-menu .mg-menu li .submenu li a {
	position: relative;
	color: #00a650; /*задаём цвет ссылки*/
	cursor: pointer;
	line-height: 1; /*задаём высоту строки*/
	text-decoration: none; /*убираем подчёркивание*/

}
.bottom-bar .main-menu .mg-menu li .submenu li a:after {
	display: block;
	position: absolute;
	left: 0; /*изменить на right:0;, чтобы изменить направление подчёркивания */
	width: 0;/*задаём длинну линии до наведения курсора*/
	height: 2px; /*задаём ширину линии*/
	background-color: #00a650; /*задаём цвет линии*/
	content: "";
	transition: width 0.3s ease-out; /*задаём время анимации*/
}

.bottom-bar .main-menu .mg-menu li .submenu li a:focus:after,
.bottom-bar .main-menu .mg-menu li .submenu li a:hover:after{
	width: 100%; /*устанавливаем значение 100% чтобы ссылка подчёркивалась полностью*/
}
Вот вы и узнали как добится плавного подчеркивания ссылки при наведении на ссылку. Если у вас появятся какие-либо вопросы - пишите в комментариях.

Сайт за 2 минуты!

Без программистов и дизайнеров, на конструкторе Moguta.CLOUD от 1 850р. в месяц

НАЧАТЬ УСТАНОВКУ ONLINE 14 дней бесплатно!

Доступен перенос сайта на ваш хостинг, при покупке редакции Moguta.CMS «Гипермаркет» с сохранением всех настроек, контента и даже позиций в поисковой выдаче!

Комментарии (26)

Имя:
E-mail:
Прикрепить изображения
Получать уведомления о новых комментариях:
  • Никита 28.09.2023 17:27
    Как сделать отступ между текстом и этой линией, много перепробовал не получается, подскажите пожалуйста
    • Максим 29.09.2023 09:31
      Здравствуйте! Используя данный код нужную вам регулировку не реализовать. Вы можете попробовать заменить данный код на использование псевдоэлемента :before
      Документация: https://htmlbook.ru/css/before
      Пример: https://codepen.io/tanin13/pen/QQqWPq
  • Натали 17.07.2023 11:25
    Благодарю за статью! Доступно, просто и красиво!
    • Администратор 17.07.2023 11:28
      Спасибо за отзыв! Рады, что статья оказалась полезна вам.
  • Виктория 08.04.2023 18:32
    Здравствуйте. Я убрала анимацию линии и теперь она просто появляется под ссылкой. Подскажите, пожалуйста, как сделать так, чтобы при нажатии линия исчезала, потому что у меня остается.
    • Максим 10.04.2023 15:47
      Здравствуйте! Без наглядного примера сайта или кода сложно понять как решить вашу проблему. Также по описанию не до конца понятно чего хотите добиться. Чтобы действие происходило именно при нажатии или при наведении.
  • Али 05.03.2023 13:42
    при наведении мышкой на кнопку подчёркивается всё линия идёт до конца а мне надо чтоб подчёркивалась только кнопка
  • Васо 05.03.2023 02:55
    как сделать так чтобы линия горела на месте? Например: когда я нахожусь на странице "скачать" линия стоит на месте как бы обозначая что я на странице "скачать" но как только я перешел на страницу "маркетплейс" то линия переходит уже на "маркетплейс" и подсвечивает именно её
  • Олег 04.05.2022 19:50
    Как вместо нижнего использовать верхнее плавное подчеркивание?
    • Денис 05.05.2022 10:28
      Здравствуйте.
      Вместо :after в стилях, используйте :before
  • Sasha Statsenko 21.05.2021 16:10
    Здравствуйте. почему ссылка подчеркивается сверху?
    • Денис 05.05.2022 10:27
      Здравствуйте.
      Убедитесь что вы используете псевдоэлемент :after.
  • gvd 30.03.2021 17:25
    Отличный кейс. Только столкнулся с проблемой, что при переносе слов подчеркивание не работает. Как можно реализовать, чтобы все работало, если текст сбросило на вторую строку?
  • Олег 08.12.2020 18:28
    Как простое подчеркивание ссылки при наведении курсора изменить на подчеркивание плавное в конкретном css?
    • Администратор 11.12.2020 11:10
      Необходимо найти правила в вашем CSS отвечающие за вывод ссылки и применить к ним описанное в статье.
  • Евгения 22.10.2020 18:44
    Спасибо за статью! Благодаря Вам, у меня все получилось!
  • art 03.06.2020 01:18
    скажите а как сделать чтоб полоска под словами как бы скользила по всем пунктам меню? появлялась вся целиком плавно из середины и скользила за курсором под словами//
  • Fedor 09.09.2019 18:20
    А как сделать что бы линия как бы появлялась не справа налево и не слева направо, а что бы она сверху вниз. ну как бы выпадала из под ссылки???
  • Алийм 18.05.2018 15:46
    Классно! спасибо! можно возможно ли сделать подчеркивание с центра что бы в две стороны уходило
    • Андрей 29.05.2018 17:33
      Всё возможно. Поиграйтесь с CSS.
    • htmlcsser 03.10.2019 22:20
      a:after { left: 50%; transform: translateX(-50%); }
  • Алла 01.07.2017 14:25
    А как применить это подчеркивание к конкретной кнопке на странице?
    • Иван 02.07.2017 16:00
      замените в коде "a" на класс кнопки, к которой хотите прикрутить подчеркивание
      пример: a:after -> button_class:after
  • ALEX 15.06.2017 15:43
    Красиво смотрится
  • Николай 13.06.2017 13:31
    Можно ли изменить скорость подчеркивания?
    • Иван 13.06.2017 18:53
      Конечно. За это отвечает свойство transition. Если хотите, допустим, чтобы подчеркивание длилось дольше, то измените значение 0,3 на например 0,6