Transitions sur pseudo-element

dabblet.css

/**
 * Transitions sur pseudo-element
 */

html{
font-family: sans-serif;
font-size:1.05em;
background:#eee;
}
ul{
position:relative;
height:2em;
margin:100px;
padding:0;
}
ul li{
display:inline;
text-align:center;
}
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:.4em .2em;
color:#51C3FA;
text-decoration:none;
text-shadow:0 1px 0 white;
background-color:transparent;
transition:background-color .3s ease;
}
ul li a:hover,ul li a:focus{
color:#c351fa;
background-color:rgba(255,255,255,.4);
transition:background-color .3s ease .4s;
}
ul li a:focus{
border-bottom:3px solid #c351fa;
}
ul li:last-child::after{
content:"";
position:absolute;
left:0px;
bottom:-3px;
display:block;
width:2em;
height:3px;
background:#ccc;
border-bottom:1px solid rgba(255,255,255,.8);
transition: all .5s ease;
}
ul li:hover ~ li:last-child::after,ul li:last-child:hover::after{background:#C351FA;}
ul li:nth-child(1):hover ~ li:last-child::after{left:0;width:2em;}
ul li:nth-child(2):hover ~ li:last-child::after{left:2em;width:4em;}
ul li:nth-child(3):hover ~ li:last-child::after{left:6em;width:4em;}
ul li:nth-child(4):hover ~ li:last-child::after{left:10em;width:12em;}
ul li:last-child:hover::after{left:22em;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"}