하단 및 상단 언더 라인/언더 라인을 애니메이션하여

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