반응형
버튼 위에 마우스를 올려놓으면(hover)
밑줄이 가운데서 좌우가 양옆으로 펼쳐지는 라인 애니메이션을 구현하고자 한다.
결과화면 미리보기
프로필 버튼 위에 마우스 호버를 하면 밑줄이 좌우가 양옆으로 펼쳐지는 애니메이션이 생긴다.
CSS - 가운데서 좌우로 펼쳐지는 라인 애니메이션
HTML
<li className="spread-underline">프로필</li>
CSS
.spread-underline {
color: #2e3248;
display: inline-block;
padding: 15px 0;
position: relative;
text-decoration: none;
}
.spread-underline::after {
background: none repeat scroll 0 0 transparent;
background: #2e3248;
bottom: 0;
content: "";
display: block;
height: 2px;
left: 50%;
position: absolute;
transition: width 0.3s ease 0s, left 0.3s ease 0s;
width: 0;
}
.spread-underline:hover::after {
left: 0;
width: 100%;
}
반응형
'JavaScript' 카테고리의 다른 글
JavaScript - Array.from() 으로 배열만들기 (0) | 2022.02.08 |
---|---|
CSS - 헤더와 푸터 영역 고정하기 (0) | 2022.01.26 |
JavaScript - Break문 vs Continue문 (0) | 2021.10.14 |
CSS - 테두리가 있는 툴팁(말풍선) 만들기 (0) | 2021.10.01 |
CSS - 툴팁 삼각형 화살표 만들기 (0) | 2021.09.30 |
댓글