CSS :before/:after 擬似要素内で画像の高さを制御できますか?

CSS :before/:after 疑似要素で画像の高さを調整できますか?

あなたのお問い合わせは、高さを変更できるかどうかです。 CSS :before/:after 疑似要素内で使用される画像。背景画像のサイズは変更できますが、疑似要素画像でも同じことが可能かどうかはすぐにはわかりません。

解決策:

調整することで部分的に目標を達成できます。擬似要素の背景サイズプロパティ。ただし、画像を囲むブロックの幅と高さを定義する必要があることに注意してください。

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

このメソッドを使用すると、指定したブロック内の画像のサイズを制御できます。ただし、ブロック自体の全体的な寸法もそれに応じて設定する必要があることに注意してください。

代替解決策:

ソース画像のサイズ変更または、インライン IMG タグを含めるようにマークアップを変更します。ただし、互換性が優先される場合は、CSS のみに依存するよりもこれらのオプションの方が信頼性が高いことが判明する可能性があります。

以上がCSS :before/:after 擬似要素内で画像の高さを制御できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。