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:

<ul class="menu"> <li> <a href="#">Menu Item</a> </li> </ul>
Code language: HTML, XML (xml)

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); } } } }
Code language: PHP (php)

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; }
Code language: CSS (css)

Enjoy!

Leave a Reply

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

*
*