Make underline CSS transition change direction

问题

I am using some style I found on this website to create an underline slide in effect. Please see jsfiddle for example.
As you can see, the underline comes in from left to right. How would I go about making another line on top of the text, which transitions in from right to left? Could I simply adapt my current code snippet, or would I have to use a 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: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 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>

回答1:

http://jsfiddle.net/juhL2256/1/

Change left to right.

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

回答2:

Try this , it work as you want

.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: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  height:2px;
}
.cmn-t-underline:hover {
  color: #98004a;
}
.cmn-t-underline:hover:after {
  width: 100%;
	height:2px;
}

.cmn-t-underline:hover:before {
  width: 100%;
	height:2px;
}

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

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

来源：https://stackoverflow.com/questions/30947517/make-underline-css-transition-change-direction

标签

html

css

css3

underline