Kann ich die Höhe eines Bildes in CSS :before/:after Pseudo-Elementen ändern?

Question

Angenommen, ich möchte Links zu bestimmten Dateitypen mit einem Bild ausschmücken. Ich könnte meine Links deklarieren als

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

dann haben CSS wie

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

Das funktioniert wunderbar, außer wenn pdf.png hat nicht die richtige Größe für meinen Linktext.

Ich möchte dem Browser sagen können, dass er die Skalierung der :after Bild, aber ich kann beim besten Willen nicht die richtige Syntax finden. Oder ist das wie bei Hintergrundbildern, wo eine Größenänderung einfach nicht möglich ist?

ETA: Ich neige dazu, entweder a) die Größe des Quellbildes serverseitig auf die "richtige" Größe zu ändern und/oder b) das Markup so zu ändern, dass es einfach ein IMG-Tag inline liefert. Ich habe versucht, diese beiden Dinge zu vermeiden, aber sie klingen, als wären sie kompatibler als der Versuch, etwas rein mit CSS zu tun. Die Antwort auf meine ursprüngliche Frage scheint zu lauten: "Sie können gewissermaßen es manchmal tun".

Answer 1

.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:"";
}

Answer 2

Ich habe diese Schriftgrößenkontrollbreite verwendet

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

Answer 3

Sie können die Höhe oder Breite der Vorher oder nachher Element wie dieses:

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

Answer 4

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