Как подчеркнуть пункт меню при наведении на него курсора? - PullRequest
Новая
       6

Как подчеркнуть пункт меню при наведении на него курсора?

1 голос
/ 08 марта 2020

Сейчас я создаю следующий веб-сайт с помощью WordPress: https://shaveiceberlin.de

Когда я наводю курсор мыши на элемент меню, как получить эффект подчеркивания, как на этом сайте? : https://snocks.com?

Мой текущий css код: 

#site-header.center-header #site-navigation-wrap .middle-site-logo:hover img {
-moz-opacity: 1;
-webkit-opacity: 1;
opacity: 1;
}

Спасибо, прекрасная команда, что помогли мне! С уважением, Джонас

1 Ответ

3 голосов
/ 08 марта 2020

Вы можете использовать псевдоселектор в сочетании с анимацией свойства transform. transform-origin важен, потому что он определяет форму, откуда анимация приходит и возвращается. По умолчанию center, поэтому я переопределяю его на left. 

.menu a {
  position: relative;
  text-decoration: none;
  font-size: 1.5rem;
}

.menu a::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 3px;
  top: 100%;
  left: 0;
  background: #ff7000;
  transition: transform 0.5s;
  transform: scaleX(0);
  transform-origin: left;
}

.menu a:hover::after {
  transform: scaleX(1);
}
<a href="#">Plain link</a>

<nav class="menu">
  <a href="#">Underline on hover or focus</a>
</nav>
...