Boarder animation

                        
<div id="wrap">
    <div class="borderArea">
        <span class="centerBd">가운데 보더 애니메이션</span>
        <span class="rightBd">오른쪽 보더 애니메이션</span>
        <span class="leftBd">왼쪽 보더 애니메이션</span>
    </div>
</div>

                        
.borderArea{display: flex; flex-direction: column; align-items: center;
    span{display: inline-block; font-family: 'Noto Sans'; font-size: 1.5em; cursor: pointer; text-transform: uppercase;
        &:after{content: ''; display: inherit; border-bottom: 2px solid $blackBg; transform: scaleX(0); transition: .5s;}
        &.leftBd:after{transform-origin: 0% 50%;}
        &.rightBd:after{transform-origin: 100% 50%;}
        &:hover{
            &:after{transform: scaleX(1);}
        }
        +span{margin-top: 30px;}
    }
}

                        
.borderArea {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.borderArea span {
    display: inline-block;
    font-family: 'Noto Sans';
    font-size: 1.5em;
    cursor: pointer;
    text-transform: uppercase;
}

.borderArea span:after {
    content: '';
    display: inherit;
    border-bottom: 2px solid #000;
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
    -webkit-transition: .5s;
    transition: .5s;
}

.borderArea span.leftBd:after {
    -webkit-transform-origin: 0% 50%;
            transform-origin: 0% 50%;
}

.borderArea span.rightBd:after {
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
}

.borderArea span:hover:after {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
}

.borderArea span + span {
    margin-top: 30px;
}

Esc 혹은 우측 상단 X 버튼을 눌러 결과창을 닫을 수 있습니다.

가운데 보더 애니메이션 오른쪽 보더 애니메이션 왼쪽 보더 애니메이션