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:



The HTML couldn't be easier:


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.


If you want the compiled CSS, here it is:


About Rick

Senior Front-end Software Engineer from Barcelona, Haidong Gumdo Instructor (korean martial art of the sword), street photographer, travel lover, TV addict, Boston Red Sox fan, and privacy advocate.

Leave a Reply

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