CODEWITHSUNDEEP
csswordpresshover
Jonmue
Jonmue

Reputation: 15

How to underline a menu item when hover over it?

I'm building the following website with WordPress right now: https://shaveiceberlin.de

When I hover over a menu item, how can I get a underline effect, like on this website: https://snocks.com ?

My current css code:

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

Thanks lovely team for helping me! Kind regards, Jonas

Upvotes: 1

Views: 5124

Answers (1)

Andy Hoffman
Andy Hoffman

Reputation: 19109

You can use the pseudo selector coupled with animating the transform property. The transform-origin is important because it dictates form where the animation is coming from and returns to. It defaults to center which is why I'm overriding it to 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>

Upvotes: 4

Related Questions