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; } 

Comments

Popular posts from this blog

powershell Start-Process exit code -1073741502 when used with Credential from a windows service environment -

twig - Using Twigbridge in a Laravel 5.1 Package -

c# - LINQ join Entities from HashSet's, Join vs Dictionary vs HashSet performance -