[CSS] 마우스 오버시 밑줄이 왼쪽에서 나타나서 오른쪽으로 사라지는 효과

(메타 퀘스트프로 사이트에 적용된 링크 효과 구현하기)

 

 

<div class="item">
  <div class="label">밑줄 효과 CSS</div>
  <div class="underline"></div>
</div>

.item {
  position: relative;
  width: fit-content;
  cursor: pointer;
}

.item .label {
  position: relative;
  padding: 4px 0;
  font-weight: 700;
  font-size: 14pt;
}

.item .underline {
  position: absolute;
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
  border-bottom: solid 1px blue;
  width: 100%;
  height: 0;
}

.item:hover .underline {
  transform-origin: bottom left;
  transform: scaleX(1);
}