画像を使用して特定のファイルタイプへのリンクを装飾したいとします。リンクを次のように宣言できます

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

それからCSSのような

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

これでpdf.png、リンクテキストのサイズが適切でない場合を除いて、これはうまく機能します。

ブラウザに:after画像を拡大縮小するように指示したいのですが、私は一生正しい構文を見つけることができません。それとも、サイズ変更ができない背景画像のようなものですか？

ETA：私は、a）ソース画像を「適切な」サイズ（サーバー側）にサイズ変更するか、b）マークアップを変更して、単純にIMGタグをインラインで提供するようにしています。私はそれらの両方を避けようとしていましたが、CSSで純粋に何かをやろうとするよりも互換性があるように思えます。私の元の質問への答えは「あなたができるように思わ一種の時々 、それを行います」。

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

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

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

:after疑似要素はボックスであり、ボックスには生成された画像が含まれていることに注意してください。画像にスタイルを設定する方法はありませんが、ボックスにスタイルを設定できます。

以下は単なるアイデアであり、上記の解決策がより実用的です。

.pdflink:after {
    content: url('/images/pdf.png');
    transform: scale(.5);
}

http://jsfiddle.net/Nwupm/

欠点：画像の固有の寸法を知っている必要があり、ATMを取り除くことができない空白がいくつか残ります。

私の他の答えは明らかによく理解されていなかったので、ここに2番目の試みがあります。

この質問に答えるには2つの方法があります。

実用的です（ひどい写真を見せてください！）

:after疑似セレクターを忘れて、次のようなものに行きます

.pdflink {
    min-height: 20px;
    padding-right: 10px;
    background-position: right bottom;
    background-size: 10px 20px;
    background-repeat: no-repeat;
}

理論上の

問題は、生成されたコンテンツにスタイルを設定できるかどうかです。答えは次のとおりです。いいえ、できません。この問題についてW3Cメーリングリストで長い議論がありましたが、今のところ解決策はありません。

生成されたコンテンツは生成されたボックスにレンダリングされ、そのボックスにスタイルを設定できますが、コンテンツ自体にはスタイルを設定できません。ブラウザーが異なると動作が大きく異なります

#foo         {content: url("bar.jpg"); width: 42px; height:42px;}  
#foo::before {content: url("bar.jpg"); width: 42px; height:42px;}

Chromeは最初の画像のサイズを変更しますが、2番目の画像には固有の寸法を使用します

つまり、Firefoxは最初のものをサポートせず、2番目の組み込み寸法を使用します。

オペラは両方の場合に固有の次元を使用します

（http://lists.w3.org/Archives/Public/www-style/2011Nov/0451.htmlから）

同様に、ブラウザーはhttp://jsfiddle.net/Nwupm/1/などの複数の要素が生成されるものに対して非常に異なる結果を表示します。CSS3はまだ開発の初期段階にあり、この問題はまだ解決されていないことに注意してください。

画像の代わりに背景を使用する必要があります。

.pdflink:after {
  content: "";
  background-image:url(your-image-url.png);
  background-size: 100% 100%;
  display: inline-block;

  /*size of your image*/
  height: 25px;
  width:25px;

  /*if you want to change the position you can use margins or:*/
  position:relative;
  top:5px;

}

diplay: block; 何の効果もありません

positioninもフロントエンドのファンダメンタルズに対して非常に奇妙に動作するので、注意してください

body:before{ 
    content:url(https://i.imgur.com/LJvMTyw.png);
    transform: scale(.3);
    position: fixed;
    left: 50%;
    top: -6%;
    background: white;
}

これが別の（実用的な）解決策です：画像を必要なサイズに変更するだけです:)

.pdflink:after {
    display: block;
    width: 20px;
    height: 10px;
    content:url('/images/pdf.png');
}

これを機能させるには、pdf.pngを20px * 10pxにする必要があります。CSSの20px / 10pxは、ブロックのサイズを指定するためのものであり、ブロックの後に来る要素がすべて画像で混乱しないようになっています。

生の画像のコピーを元のサイズに保つことを忘れないでください

.pdflink:after {
    background-image: url('/images/pdf.png');
    background-size: 10px 20px;
    width: 10px; 
    height: 20px;
    padding-left: 10px;// equal to width of image.
    margin-left:5px;// to add some space for better look
    content:"";
}

zoomプロパティを使用できます。このjsfiddleを確認してください

次のように、BeforeまたはAfter要素の高さまたは幅を変更できます。

.element:after {
  display: block;
  content: url('your-image.png');
  height: 50px; //add any value you need for height or width
  width: 50px;
}

私はこのフォントサイズ制御幅を使用しました

.home_footer1::after {
color: transparent;
background-image: url('images/icon-mail.png');      
background-size: 100%;      
content: ".......................................";
font-size: 30pt;
}

今日のflexboxを使用すると、コードを大幅に簡略化し、必要に応じて1つのパラメーターのみを調整できます。

.pdflink:after {
    content: url('/images/pdf.png');
    display: inline-flex;
    width: 10px;
}

要素の幅を調整するだけで、高さが自動的に調整され、要素の高さが必要な数になるまで幅が増減します。

content: "";
background-image: url("yourimage.jpg");
background-size: 30px, 30px;