将鼠标悬停在菜单项上时如何为其添加下划线？

Question

我现在正在使用 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;
}

感谢可爱的团队帮助我！亲切的问候，乔纳斯

Answer 1

您可以结合使用伪选择器和动画 transform 属性。 transform-origin 很重要，因为它决定了动画的来源和 returns 的形式。它默认为 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>

将鼠标悬停在菜单项上时如何为其添加下划线？

How to underline a menu item when hover over it?

css

wordpress

hover