CSS - 가운데서 좌우로 펼쳐지는 라인 애니메이션

버튼 위에 마우스를 올려놓으면(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%;
}

 

 

 

 

ref: https://goodbypoor.tistory.com/162