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

Ваш заказ

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

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

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

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

Содержание    

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

Получать уведомления о новых коментариях:
  • Алла 01.07.2017 15:25
    А как применить это подчеркивание к конкретной кнопке на странице?
    • Иван 02.07.2017 17:00
      замените в коде "a" на класс кнопки, к которой хотите прикрутить подчеркивание
      пример: a:after -> button_class:after
  • ALEX 15.06.2017 16:43
    Красиво смотрится
  • Николай 13.06.2017 14:31
    Можно ли изменить скорость подчеркивания?
    • Иван 13.06.2017 19:53
      Конечно. За это отвечает свойство transition. Если хотите, допустим, чтобы подчеркивание длилось дольше, то измените значение 0,3 на например 0,6
Загрузить все

Следите за нами в группе ВКонтактe.