Анимация внизу и сверху под/надстрокой для соответствия

Question

Я работал над элементом, где границы «границы» или под/надстроками встречались слева и справа от элемента в медленном переходе.

Это где я получил до сих пор: 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"> 
 
\t <h1 class="">FAQs</h1> 
 
</div>

Один подход, который я попытался было отображать границы на элементе h1 после того, как в/Overline переход был закончен, но не мог заставить его работать.

Но я не могу понять, как бы я получил желаемый эффект.

получил базу для этого проекта отсюда. http://bradsknutson.com/blog/css-sliding-underline/

Answer 1

Возьмите другой элемент, такой как span внутри h1 и сделайте левый и правый эффект на них.

, например

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