Navigation Menu Mouse Hover Underline animation only CSS & HTML

Today I share a simple but awesome mouse hover underline animation navigation menu. You can use this for all kinds of website projects. And this animation created with the only CSS no JS or jquery. Let’s began

HTML

First, we’ve to create the menu items int the HTML section. Here it is.

<ul>
  <li><a href="#">home</a></li>
  <li><a href="#">archives</a></li>
  <li><a href="#">tags</a></li>
  <li><a href="#">categories</a></li>
  <li><a href="#">about</a></li>
</ul>

CSS

After creating the menu items we’ll now do our design and mouse hover underline animation

@import url(https://fonts.googleapis.com/css?family=Lato);

body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: #222;
}

ul {
  display: flex;
  flex-direction: column;
  align-items: start;
  list-style-type: none;

  li {
    padding: 6px 0;

    a {
      position: relative;
      display: block;
      padding: 4px 0;
      font-family: Lato, sans-serif;
      color: #ecf0f1;
      text-decoration: none;
      text-transform: uppercase;
      transition: 0.5s;

      &amp;::after {
        position: absolute;
        content: "";
        top: 100%;
        left: 0;
        width: 100%;
        height: 3px;
        background: #3498db;
        transform: scaleX(0);
        transform-origin: right;
        transition: transform 0.5s;
      }

      &amp;:hover {
        color: #95a5a6;
      }

      &amp;:hover::after {
        transform: scaleX(1);
        transform-origin: left;
      }
    }
  }
}

Check this full source code on Codepen

See the Pen Menu Hover Underline by emuslearner (@emuslearner) on CodePen.default

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: