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


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

  <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>


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

@import url(;

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

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

%d bloggers like this: