ボトムとアンダーライン/アンダーラインをアニメーション化する

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要素に境界線を表示するようにしたが、それを働かせることができませんでした。

しかし、私はどのように私が望む効果を得るかを理解できません。

ここからこのプロジェクトのベースを取得しました。 http://bradsknutson.com/blog/css-sliding-underline/

Answer 1

h1の中にspanのような別の要素を置き、左右に境界線を付けます。例えば

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