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!