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:

animated-pseudo-elements-menu

HTML

The HTML couldn’t be easier:

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.

CSS

If you want the compiled CSS, here it is:

Enjoy!

Tags:

No comments yet, leave yours!

Leave a Reply

Add <code> Some Code </code> by using this tags.