Navigation Menu Mouse Hover Underline animation only CSS & HTML

164 0

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;

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

      &:hover {
        color: #95a5a6;

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

Check this full source code on Codepen

[codepen_embed height=”265″ theme_id=”default” slug_hash=”JjjxrWQ” default_tab=”result” user=”emuslearner”]See the Pen Menu Hover Underline by emuslearner (@emuslearner) on CodePen.[/codepen_embed]

Leave a Reply