Animating bottom and top under/overline to meet

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