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;高さ: 20ピクセル;含まれるブロックの寸法を定義します。
• content: "";疑似要素内のデフォルトのコンテンツを非表示にします。

互換性

さまざまなブラウザでのサポートの詳細については、MDN 互換性テーブルを参照してください。

以上がCSS :before/:after 擬似要素で画像を拡大縮小するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。