Change direction change direction CSS
I am using some style I found on this website to create a slide slide. See jsfiddle for example.
As you can see, the underline occurs from left to right. How can I make another line on top of the text that flows from right to left? Can I just adapt my current piece of code, or do 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>
+3
source to share
2 answers
http://jsfiddle.net/juhL2256/1/
Change from 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
source to share
Try this it works the way 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>
+3
source to share