Pour animer le bas et le haut sous/sur la ligne pour rencontrer

Question

J'ai travaillé sur un élément où les «bordures» ou sous/surlignements se rencontreraient sur le côté gauche et droit de l'élément dans une transition lente.

C'est là que j'ai jusqu'à présent: 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>

Une approche que j'ai essayé était d'afficher les frontières sur l'élément h1 après la sous/transition overline était fini, mais ne pouvait pas le faire fonctionner.

Mais je n'arrive pas à comprendre comment j'obtiendrais l'effet désiré.

a obtenu la base pour ce projet d'ici. http://bradsknutson.com/blog/css-sliding-underline/

Answer 1

Prenez un autre élément comme span intérieur h1 et faire droit à la frontière et l'effet gauche sur eux.

par exemple

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