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 疑似要素が空 ("") であっても、何らかのコンテンツを定義する必要があることに注意することが重要です。

詳細については、Mozilla Developer Network (MDN) の互換性を参照してください。表。

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