html - 在文本上方和下方添加行过渡

Question

此问题是 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>

Answer 1

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

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

我只将第二个 :after 更改为 :before 并且一切正常。

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