Transitions sur pseudo-element

dabblet.css

/**
 * Transitions sur pseudo-element
 */

html{
font-family: sans-serif;
font-size:1.05em;
background:#eee;
}
ul{
position:relative;
z-index:1;
width:12em;
margin:100px;
padding:.3em;
background: linear-gradient(#596369, #354044 80%);
border-radius:3px;
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,.9);
box-shadow: 0 0 0 1px #000, inset 0 1px 0 rgba(255,255,255,.2), 0 2px 5px rgba(0,0,0,.4);
}
ul li{
display:block;
z-index:10;
height:2em;
}
ul li:nth-child(1) a{width:2em;}
ul li:nth-child(2) a{width:4em;}
ul li:nth-child(3) a{width:4em;}
ul li:nth-child(4) a{width:12em;}
ul li:nth-child(5) a{width:5em;}

ul li a{
display:inline-block;
box-sizing:border-box;
padding:.5em .4em;
color:#fff;
text-decoration:none;
background-color:transparent;
transition:background-color .3s ease;
}
ul li a:hover,ul li a:focus{

}
ul li a:focus{
border-bottom:3px solid #c351fa;
}
ul li:last-child::after{
content:"";
position:absolute;
z-index:-1;
left:.3em;
top:.3em;
display:block;
width:2em;
height:2em;
background: linear-gradient(#45a2c4, #1a729f, #14608d 90%);
border-radius: 3px;
box-shadow: 0 0 0 1px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.1), inset 0 1px 0 rgba(255,255,255,.2);  
transition: all .5s ease;
}
ul li:hover ~ li:last-child::after,ul li:last-child:hover::after{}
ul li:nth-child(1):hover ~ li:last-child::after{top:.3em;width:2em;}
ul li:nth-child(2):hover ~ li:last-child::after{top:2.3em;width:4em;}
ul li:nth-child(3):hover ~ li:last-child::after{top:4.3em;width:4em;}
ul li:nth-child(4):hover ~ li:last-child::after{top:6.3em;width:12em;}
ul li:last-child:hover::after{top:8.3em;width:5em;}

dabblet.html

<ul>
	<li><a href="#">✿</a></li><!--
 --><li><a href="#">Lorem</a></li><!--
 --><li><a href="#">Ipsum</a></li><!--
 --><li><a href="#">Consectetur adipisicing</a></li><!--
 --><li><a href="#">Sit amet</a></li>
</ul>

settings.json

{"view":"split","prefixfree":"1","page":"css"}