МЕНЮ
Смотреть демо
0

Ваш заказ

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

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

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

В этой статье мы расскажем вам как добиться такого эффекта, как плавное подчеркивание ссылки при наведении 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% чтобы ссылка подчёркивалась полностью*/
}
Вот вы и узнали как добится плавного подчеркивания ссылки при наведении на ссылку. Если у вас появятся какие-либо вопросы - пишите в комментариях.

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

Имя:
E-mail:


Получать уведомления о новых комментариях:
  • Алийм 18.05.2018 15:46
    Классно! спасибо! можно возможно ли сделать подчеркивание с центра что бы в две стороны уходило
    • Андрей 29.05.2018 17:33
      Всё возможно. Поиграйтесь с CSS.
  • Алла 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