• Страница 1 из 1
  • 1
Форум » Записки веб-разработчика » Начинающему вебмастеру » Создание анимационного подчеркиваний ссылок (Аминирование подчеркивание заголовков с помощью CSS)
Создание анимационного подчеркиваний ссылок
Kosten
Дата: Понедельник, 2018-11-05, 15:17 | Сообщение 1
Администраторы
Сообщений:18467
Награды: 55


Иногда на сайте нужно создать оригинальное подчеркивание ссылки или ключевого слова, что будет находится для перехода. Давайте рассмотрит один вариант, который изначально по стилистике выстроен в горизонтальное меню. Но веб разработчик может сделать на любое слово, которое находится под ссылкой на переход.

Сам эффект заключается в том, что при наведение идет верхнее и нижнее подчеркивание, но если по вверх идет с одной стороны, то снизу с противоположной, что визуально смотрится красиво.



HTML

Код
<nav>
  <ul>
    <li>ZORNET.RU</li>
    <li>СКРИПТЫ</li>
    <li>ШАБЛОНЫ</li>
    <li>СТИЛИСТИКА</li>
  </ul>
</nav>


CSS

Код
ul {
  display: flex;  
  list-style: none;
}

li {  
  padding: 10px 15px;
  cursor: pointer;
  position: relative;
}

li::before,
li::after {    
  content: "";  
  display: block;
  position: absolute;    
  width: 0;
  height: 1px;
  
  background-color: #00BEE0;
  transition: all 0.3s;  
}

li::before {
  top: 0;  
  left: 0;
}

li::after {
  right: 0;
  bottom: 0;
}

li:hover::before,
li:hover::after {
  width: 100%;
}


Демонстрация
Прикрепления: 9258339.png(2.7 Kb)
Страна: (RU)
Форум » Записки веб-разработчика » Начинающему вебмастеру » Создание анимационного подчеркиваний ссылок (Аминирование подчеркивание заголовков с помощью CSS)
  • Страница 1 из 1
  • 1
Поиск: