[CSS] 마우스오버 (hover) 밑줄 애니메이션 효과

마우스오버(mouseover, hover) 시 밑줄(underline)이 가운데 또는 왼쪽에서부터 나타나는 효과 적용하는 법

 

[html]

<ul>

  <li class="center">Center</li>

  <li class="left">Left to Right</li>

</ul>

 

[css]

ul {

  display: flex;

  gap: 40px;

  font-size: 40px;

  list-style: none;

}

li::after {

  content: "";

  display: block;

  width: 100%; height: 4px;

  background: #000;

  transition: all 1s;

}

/* 가운데에서 나타남 */

.center::after {

  transform: scaleX(0);

}

.center:hover::after {

  transform: scaleX(1);

}

/* 왼쪽에서 나타남 */

.left::after {

  width: 0;

}

.left:hover::after {

  width: 100%;

}