[解決済み】CSSの:before/:after疑似要素で画像の高さを変えることはできますか？

質問

ある種のファイルへのリンクを画像で装飾したいとします。 この場合、リンクは次のように宣言します。

<a href='foo.pdf' class='pdflink'>A File!</a>

のようなCSSを用意します。

.pdflink:after { content: url('/images/pdf.png') }

さて、これは素晴らしく機能しますが、もし pdf.png は、リンクテキストのサイズに合っていません。

を拡大縮小するようにブラウザに指示できるようにしたいのですが。 :after の画像がありますが、正しい構文がどうしても見つかりません。 それとも、背景画像と同じで、サイズ変更ができないのでしょうか？

ETA: 私は、a) ソース画像をサーバサイドで "right" サイズに変更する、および/または b) マークアップを変更して単に IMG タグをインラインで供給する、のどちらかに傾いています。 私はこの2つを避けようとしていたのですが、純粋にCSSで何かをしようとするよりも互換性があるように聞こえます。 私の最初の質問に対する答えは、次のようなものです。 ソート できることもありますよ"。

解決方法は？

を調整する background-size が許可されています。ただし、ブロックの幅と高さは指定する必要があります。

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

MDN の完全な互換性テーブルを参照してください。 .