CSS로 확장 하단 테두리 호버 효과를 만드는 방법은 무엇입니까?

호버 효과: 호버 시 하단 테두리 확장

시각적으로 매력적인 웹사이트를 만들려면 대화형 기능을 추가해야 할 수도 있습니다. 요소에 호버 효과를 줍니다. 디자인을 향상시킬 수 있는 특별한 효과 중 하나는 마우스 오버 시 아래쪽 테두리를 확장하는 것입니다.

이 효과를 얻으려면 CSS의 변환:scaleX() 속성을 활용할 수 있습니다. 마우스 오버 시 scaleX 속성을 0에서 1로 전환하면 아래쪽 테두리가 확장되는 듯한 느낌을 줄 수 있습니다.

다음은 가운데에서 아래쪽 테두리를 확장하는 코드 예제입니다.

h1 {
  color: #666;
  display: inline-block;
  margin: 0;
  text-transform: uppercase;
}
h1:after {
  display: block;
  content: '';
  border-bottom: solid 3px #019fb6;
  transform: scaleX(0);
  transition: transform 250ms ease-in-out;
}
h1:hover:after {
  transform: scaleX(1);
}

그러나 왼쪽이나 오른쪽에서 테두리를 확장하려면 다음과 같이 변환 원본 속성을 수정할 수 있습니다. 다음은 다음과 같습니다.

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

이 코드는 테두리와 전환을 적용하는 의사 요소를 생성하여 텍스트 자체의 전환을 방지하고 HTML의 의미 구조를 유지합니다.

이러한 기술을 구현하면 테두리에 역동적이고 시각적으로 매력적인 호버 효과를 추가하여 사용자 경험을 향상시키고 웹사이트를 돋보이게 만들 수 있습니다.

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