在文本上方和下方添加行转换

时间:2015-06-20 18:33:14

标签: html css css3 css-transitions

此问题来自my previous question
我使用了this website中的一些样式来创建下划线效果的幻灯片,请参阅此jsfiddle上的示例。 我之前的问题是询问如何对此进行调整以使该行从右到左进行,并且在文本的顶部,请参阅此jsfiddle上的示例。

我的下一步是将这两个元素添加到一个元素中,因此一条线从左到右滑入底部,另一条线从右到左滑入顶部。

当我尝试将这两者加在一起时,它似乎只显示最上面一个,请看jsfiddle

我的问题是如何将顶部幻灯片和底部幻灯片都添加到元素中?



.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-overline {
  position: relative;
  color: #ff3296;
}
.cmn-t-overline:after {
  display: block;
  position: absolute;
  right: 0;
  top: -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-overline:hover {
  color: #98004a;
}
.cmn-t-overline:hover:after {
  width: 100%;
	height:2px;
}

<h1 class="cmn-t-underline cmn-t-overline">Test</h1>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:0)

您必须使用:before作为您的收入,:after作为您的底线。 你这样做的方式是第二个“:after”覆盖第一个,所以你最终只有一行。

我已经编辑了你的jsFiddle: http://jsfiddle.net/7k4rLdno/

我只用:after更改了第二个:before,一切正常。

您不能有两个:after或两个:before完全相同的元素。

答案 1 :(得分:0)

使用

:before - 第一行

:after - 底线

h1{
    position: relative;
    color: #ff3296;
}
h1:before, 
h1:after {
    display: block;
    position: absolute;
    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:before {
    left: 0;
    top: -10px;
}
h1:after {
    right: 0;
    bottom: -10px;
}
h1:hover {
    color: #98004a;
}
h1:hover:after, 
h1:hover:before {
    width: 100%;
    height:2px;
}
<h1>Test</h1>

Fiddle