Transitions sur pseudo-element

dabblet.css

/**
 * Transitions sur pseudo-element
 */

html{
font-family: sans-serif;
font-size:1em;
background:#eee;
}
ul{
position:relative;
margin:100px;
padding:0;
}
ul li{
display:inline;
text-align:center;
}
ul li:nth-child(1) a{width:50px;}
ul li:nth-child(2) a{width:50px;}
ul li:nth-child(3) a{width:70px;}
ul li:nth-child(4) a{width:170px;}

ul li a{
display:inline-block;
padding:5px;
color:#51C3FA;
text-decoration:none;
text-shadow:0 1px 0 white;
background-color:transparent;
transition:background-color .3s ease;
}
ul li a:hover{
background-color:rgba(255,255,255,.4);
transition:background-color .3s ease .4s;
}
ul li:last-child::after{
content:"";
position:absolute;
left:-10px;
display:block;
background:#51C3FA;
width:0px;
height:3px;
transition: all .5s ease;
}
ul li:nth-child(1):hover ~ li:last-child::after{left:0;width:60px;}
ul li:nth-child(2):hover ~ li:last-child::after{left:60px;width:60px;}
ul li:nth-child(3):hover ~ li:last-child::after{left:120px;width:80px;}
ul li:nth-child(4):hover::after{left:200px;width:180px;}

dabblet.html

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

settings.json

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