Animating bottom and top under/overline to meet - html

Question

I've been working on an element where the "borders" or under/overlines would meet on the left and right side of the element in a slow transition.
This is where I've got so far: http://codepen.io/anon/pen/RRNjgo
.sliding-middle-out:hover {
font-size: 30px;
transition: font-size 2s ease;
}
.dark {
background-color: black;
display: inline-block;
min-width: 200px;
min-height: 300px;text-align: center;
cursor: pointer;
}
.dark h1 {
color: white;
text-align: center;
}
.sliding-middle-out {
display: inline-block;
position: relative;
padding-bottom: 3px;
}
.sliding-middle-out h1:after {
content: '';
display: block;
margin: auto;
height: 3px;
width: 0px;
background: transparent;
transition: width 2s ease, background-color .5s ease;
}
.sliding-middle-out:hover h1:after {
width: 50%;
background: #b7d333;
}
.sliding-middle-out h1:before {
content: '';
display: block;
margin: auto;
height: 3px;
width: 0px;
background: transparent;
transition: width 2s ease, background-color .5s ease;
}
.sliding-middle-out:hover h1:before {
width: 50%;
background: #b7d333;
border-left: 1px solid black;
}
<div class="dark sliding-middle-out">
<h1 class="">FAQs</h1>
</div>
One approach I tried was to display borders on the h1 element after the under/overline transition was finished, but couldn't get it to work.
But I cant figure out how i would get the desired effect.
got the base for this project from here.
http://bradsknutson.com/blog/css-sliding-underline/

Answer 1

Take another element like span inside h1 and make border right and left effect on them.
for example
Html
<div class="dark sliding-middle-out">
<h1 class=""><span>FAQs</span></h1>
</div>
css
.sliding-middle-out h1 span {
position: relative;
}
.sliding-middle-out h1 span:after,
.sliding-middle-out h1 span:before {
content: '';
display: block;
margin: auto;
width: 3px;
transition: height 2s ease, background-color .5s ease;
background: #B7D333;
top: 0;
bottom: 0;
height: 0;
position: absolute;
}
.sliding-middle-out h1 span:before {
left: -5px;
}
.sliding-middle-out h1 span:after {
right: -5px;
}
.sliding-middle-out:hover h1 span:after,
.sliding-middle-out:hover h1 span:before {
height:50%;
}
Demo