Add line transition above and below text - html

Question

this question is a follow on from my previous question.
I have some style used from this website, to create a slide in underline effect, please see example on this jsfiddle.
My previous question was asking how to adapt this so the line came in from right to left, and on top of the text, please see example on this jsfiddle.
My next step is to add both of these to one element, so one line slides in from left to right on the bottom, and the other right to left on top.
When I tried to add both of these together, it seems to only display the top one, please see this jsfiddle.
My question is how do I add both the top slide in line and the bottom slide in line to an element?
.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

You have to make use of :before for your top line, and :after for your bottom line.
The way you are doing it the second ":after" overrides the first so you end up with only one line.
I have edited your jsFiddle :
http://jsfiddle.net/7k4rLdno/
I only changed the second :after with :before and everything works well.
You can't have two :after or two :before the the exact same element.

Answer 2

use
:before - top line
:after - bottom line
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