使下划线CSS转换更改方向 [英] Make underline CSS transition change direction
本文介绍了使下划线CSS转换更改方向的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我使用我在此网站上找到的一些风格以创建有效的下划线幻灯片。请参见 jsfiddle 例如。
如您所见,下划线从左到右向右。我将如何在文本的顶部做另一行,从右到左转换?
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>
推荐答案
http://jsfiddle.net/juhL2256/1/
从左向右更改。
.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;
}
这篇关于使下划线CSS转换更改方向的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文