CSS :before/:after 의사 요소 내에서 이미지 크기를 어떻게 조정할 수 있나요?

CSS에서 이미지 높이 수정 :before/:after 의사 요소

CSS에서 의사 요소(:before 및 :after) 콘텐츠를 직접 수정하지 않고도 요소 표시를 향상할 수 있습니다. 그러나 이러한 의사 요소 내에서 이미지 높이를 조정하는 것은 어려울 수 있습니다.

이미지를 사용하여 특정 파일 형식에 대한 링크를 장식한다고 가정해 보겠습니다. 클래스로 링크를 정의하고 아래와 같이 CSS 규칙을 포함할 수 있습니다.

<a href="foo.pdf">

이 접근 방식은 효과적으로 작동하지만 이미지가 링크 텍스트에 적합하지 않은 크기일 가능성을 고려하지 못합니다.

처음에는 CSS를 사용하여 :after 이미지의 크기를 조정하려고 시도할 수 있지만 안타깝게도 직접적으로는 불가능합니다. background-size 속성을 사용하여 크기를 조정할 수 있는 배경 이미지와 달리 의사 요소는 유사한 크기 조정 메커니즘을 제공하지 않습니다.

그러나 의사 요소 내에서 크기 조정을 제한할 수 있는 해결 방법이 있습니다.

.pdflink:after {
    background-image: url("/images/pdf.png");
    background-size: 10px 20px;
    display: inline-block;
    width: 10px;
    height: 20px;
    content: "";
}

배경 크기를 설정하고 블록의 너비와 높이를 지정하면 :after 의사 요소 내에서 이미지 크기를 효과적으로 조정할 수 있습니다. 이 접근 방식을 사용하려면 비어 있는("") 경우에도 :after 의사 요소에 일부 콘텐츠가 정의되어 있어야 한다는 점을 기억하는 것이 중요합니다.

자세한 내용은 MDN(Mozilla 개발자 네트워크) 호환성을 참조하세요. 테이블.

위 내용은 CSS :before/:after 의사 요소 내에서 이미지 크기를 어떻게 조정할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!