Animated Menu with Pseudo-Elements

Here's a cool menu I had to do for a project I'm working on. It's a simple ul > li menu with a neat transition on the li's pseudo-element.

It looks like this:

HTML

The HTML couldn't be easier:

<ul class="menu">
  <li>
    <a href="#">Menu Item</a>
  </li>
</ul>

LESS

LESS to the rescue! The concept here is to increase the width value of the pseudo-element (:before) when we hover the item.

I've added a transition so it looks smooth and continuous.

.transition(@transition) {
  transition: @transition;
}

.menu {

  li {
    list-style-type: none;
    background: #171717;
    position: relative;
    margin-bottom: 1px;
    z-index: 0;

    a {
      color: white;
      padding: 0.5em 1em;
      font-size: 1.2em;
      width: 100%;
      box-sizing: border-box;
      display: block;

      &:hover {
        text-decoration: none;
      }

      &:hover:before {
        width: 100%;
      }

      &:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 11px;
        height: 100%;
        z-index: -1;
        background: #ed177b;
        .transition(all 0.3s ease-in);
      }

    }
  }
}

CSS

If you want the compiled CSS, here it is:

.menu li {
  list-style-type: none;
  background: #171717;
  position: relative;
  margin-bottom: 1px;
  z-index: 0;
}

.menu li a {
  color: white;
  padding: 0.5em 1em;
  font-size: 1.2em;
  width: 100%;
  box-sizing: border-box;
  display: block;
}

.menu li a:hover {
  text-decoration: none;
}

.menu li a:hover:before {
  width: 100%;
}

.menu li a:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 11px;
  height: 100%;
  z-index: -1;
  background: #ed177b;
  transition: all 0.3s ease-in;
}

Enjoy!