CSS HOVER시 밑줄 애니메이션

아래 헤더 컴포넌트가 있습니다.

HeaderComponent.js 파일

function HeaderComponent(){

    return (

        <header>

            <div className="header-logo-div">

                logo or title

            </div>

            <div className="menu-list">

                <ol>

                    <li>Product Store</li>

                    <li>Our Story</li>

                    <li>Store</li>

                    <li>Instar</li>

                </ol>

            </div>

        </header>

    )

}

export default HeaderComponent;

아래 HEADER CSS 코드입니다.

header{

  margin: 40px 80px;

  display: flex;

}

.header-logo-div{

  background-color: rgb(34, 152, 152);

}

.menu-list{

  margin-right: 0;

  margin-left: auto;

}

.menu-list ol{

  list-style: none;

  float: left;

}

.menu-list li{

  float: left;

  margin: 0 35px;

}

.menu-list li::after{

  content: "";

  display: block;

  border-bottom: 2px black;

  transition: width 250ms ease-out;

  left: auto;

  right: 0;

  width: 0;

  height: 2px;

}

.menu-list li:hover::after{

  right: auto;

  left: 0;

  width: 100%;

  background-color: rebeccapurple;

}

여기서 ::after는 지정된 요소에 content : “” 의 요소 추가로 붙습니다.

추가된 요소(element) block 요소를 지정해주면 ol 밑으로 들어간다. (block이기 때문에)

Width : 0 이고 hover 이면 100%를 주고 애니메이션까지 지정해주어

부드럽게 펴지도록 만들어줍니다.

전체적인 디자인은 아직 작성 중 입니다.

마우스 올릴 때 애니메이션도 동작합니다

GIF는 추후에 추가하도록 하겠습니다.