CSS:before/:after 의사 요소에서 이미지 크기를 조정하는 방법은 무엇입니까?

CSS에서 이미지 크기 조정 :before/:after 의사 요소

의사 요소를 사용하여 이미지로 링크를 장식하면 시각적 매력이 향상됩니다. 그러나 이미지 크기가 링크 텍스트와 맞지 않으면 이미지 높이를 수정해야 할 필요성이 발생합니다.

이미지 높이 스케일링 구문

배경 이미지와 달리, 의사 요소 이미지는 background-size 속성을 사용하여 크기를 조정할 수 있습니다. 그러나 이를 위해서는 포함 블록의 너비와 높이를 지정해야 합니다.

수정된 CSS는 다음과 같습니다.

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

이 코드에서:

• background- 크기: 10픽셀 20픽셀; 이미지 크기를 너비 10픽셀, 높이 20픽셀로 조정합니다.
• display: inline-block; 의사 요소가 인라인 요소로 작동하는지 확인합니다.
• width: 10px; 높이: 20px; 포함 블록의 크기를 정의합니다.
• content: ""; 의사 요소의 기본 콘텐츠를 숨깁니다.

호환성

다양한 브라우저에 대한 지원 세부정보는 MDN 호환성 표를 참조하세요.

위 내용은 CSS:before/:after 의사 요소에서 이미지 크기를 조정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!