아래쪽 테두리가 확장되어 호버 효과를 만드는 방법은 무엇입니까?

마우스 오버 시 하단 테두리 확장

이 질문의 목표는 요소 위에 커서를 올렸을 때 하단 테두리가 확장되는 호버 효과를 만드는 것입니다. 제공된 코드 조각은 불투명도 전환이 포함된 의사 요소를 사용하여 마우스 오버 시 테두리를 표시합니다.

해결책:

원하는 효과를 얻으려면 CSS 변환을 사용할 수 있습니다. : scaleX()는 불투명도가 아닌 테두리를 확장합니다. 작동 방식은 다음과 같습니다.

1. 하단 테두리가 있는 의사 요소 만들기:

   h1:after {
     position: absolute;
     left: 0;
     content: '';
     height: 40px;
     width: 275px;
     border-bottom: solid 3px #019fb6;
   }

2. 전환을 사용하여 scaleX() 변환 적용 :

   h1:after {
     ...
     transform: scaleX(0);
     transition: transform 250ms ease-in-out;
   }

3. 국경 확장 마우스를 올리면 scaleX를 1로 설정하여:

   h1:hover:after {
     transform: scaleX(1);
   }

확장 방향 수정:

추가로 테두리 방향을 제어할 수 있습니다. 의사의 변환 원본 속성을 조정하여 확장 요소:

1. 가운데에서 확장하려면:

   h1:after {
     ...
     transform-origin: 50% 50%;
   }

2. 오른쪽에서 확장하려면:

   h1:after {
     ...
     transform-origin: 100% 50%;
   }

3. 에서 확장하려면 왼쪽:

   h1:after {
     ...
     transform-origin: 0% 50%;
   }

위 내용은 아래쪽 테두리가 확장되어 호버 효과를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!