html - Make underline CSS transition change direction -

i using style found on this website create underline slide in effect. please see jsfiddle example.
can see, underline comes in left right. how go making line on top of text, transitions in right left? adapt current code snippet, or have use different method entirely?

.cmn-t-underline {    position: relative;    color: #ff3296;  }  .cmn-t-underline:after {    display: block;    position: absolute;    left: 0;    bottom: -10px;    width: 0;    height: 10px;    background-color: #2e9afe;    content: "";    -webkit-transition: 0.3s;    -moz-transition: 0.3s;    -o-transition: 0.3s;    transition: 0.3s;    height:2px;  }  .cmn-t-underline:hover {    color: #98004a;  }  .cmn-t-underline:hover:after {    width: 100%;  	height:2px;  }

<h1 class="cmn-t-underline">test</h1>

http://jsfiddle.net/juhl2256/1/

change left right.

.cmn-t-underline:after {   display: block;   position: absolute;   right: 0;   bottom: -10px;   width: 0;   height: 10px;   background-color: #2e9afe;   content: "";   -webkit-transition: 0.3s;   -moz-transition: 0.3s;   -o-transition: 0.3s;   transition: 0.3s;   height:2px; }