Angenommen, ich möchte Links zu bestimmten Dateitypen mithilfe eines Bildes dekorieren. Ich könnte meine Links als deklarieren

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

dann habe CSS wie

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

Das funktioniert jetzt großartig, außer wenn pdf.pnges nicht die richtige Größe für meinen Linktext hat.

Ich möchte dem Browser mitteilen können, dass er das :afterBild skalieren soll , aber ich kann für mein ganzes Leben nicht die richtige Syntax finden. Oder ist dies wie bei Hintergrundbildern, bei denen eine Größenänderung einfach nicht möglich ist?

ETA: Ich neige dazu, entweder a) das Quellbild auf die "richtige" Größe zu ändern, serverseitig und / oder b) das Markup zu ändern, um einfach ein IMG-Tag inline bereitzustellen. Ich habe versucht, diese beiden Dinge zu vermeiden, aber sie klingen so, als wären sie kompatibler als der Versuch, Dinge nur mit CSS zu tun. Die Antwort auf meine ursprüngliche Frage scheint zu lauten: " Manchmal kann man das irgendwie tun."

Das Einstellen background-sizeist zulässig. Sie müssen jedoch weiterhin die Breite und Höhe des Blocks angeben.

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

Siehe die vollständige Kompatibilitätstabelle im MDN .

Beachten Sie, dass das :afterPseudoelement eine Box ist, die wiederum das generierte Bild enthält. Es gibt keine Möglichkeit, das Bild zu formatieren, aber Sie können die Box formatieren.

Das Folgende ist nur eine Idee, und die obige Lösung ist praktischer.

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

http://jsfiddle.net/Nwupm/

Nachteile: Sie müssen die intrinsischen Abmessungen des Bildes kennen und es bleibt Ihnen ein Leerzeichen, das ich am Geldautomaten nicht loswerden kann.

Da meine andere Antwort offensichtlich nicht gut verstanden wurde, ist hier ein zweiter Versuch:

Es gibt zwei Ansätze, um die Frage zu beantworten.

Praktisch (zeig mir einfach das verdammte Bild!)

Vergessen Sie den :afterPseudo-Selektor und entscheiden Sie sich für so etwas

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

Theoretisch

Die Frage ist: Können Sie generierte Inhalte stylen ? Die Antwort lautet: Nein, das kannst du nicht. Es gab eine lange Diskussion über die W3C-Mailingliste zu diesem Thema, aber bisher keine Lösung.

Generierter Inhalt wird in eine generierte Box gerendert, und Sie können diese Box formatieren, jedoch nicht den Inhalt als solchen . Verschiedene Browser zeigen ein sehr unterschiedliches Verhalten

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

Chrome ändert die Größe des ersten Bilds, verwendet jedoch die intrinsischen Abmessungen des Bildes für das zweite

Firefox und dh unterstützen die erste nicht und verwenden intrinsische Dimensionen für die zweite

Die Oper verwendet für beide Fälle intrinsische Dimensionen

(von http://lists.w3.org/Archives/Public/www-style/2011Nov/0451.html )

In ähnlicher Weise zeigen Browser sehr unterschiedliche Ergebnisse bei Dingen wie http://jsfiddle.net/Nwupm/1/ , bei denen mehr als ein Element generiert wird. Beachten Sie, dass sich CSS3 noch in einem frühen Entwicklungsstadium befindet und dieses Problem noch nicht gelöst ist.

Sie sollten Hintergrund anstelle von Bild verwenden.

.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; haben keine Wirkung

positionin funktioniert auch sehr seltsam, wenn es um Frontend-Grundlagen geht. Seien Sie also vorsichtig

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

Hier ist eine andere (funktionierende) Lösung: Ändern Sie einfach die Größe Ihrer Bilder auf die gewünschte Größe :)

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

Sie benötigen pdf.png, um 20px * 10px zu sein, damit dies funktioniert. Die 20px / 10px in der CSS sind hier, um die Größe des Blocks anzugeben, damit die Elemente, die nach dem Block kommen, nicht alle mit dem Bild durcheinander gebracht werden

Vergessen Sie nicht, eine Kopie des Rohbilds in der Originalgröße aufzubewahren

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

Sie können die zoomEigenschaft verwenden. Überprüfen Sie diese jsfiddle

Sie können die Höhe oder Breite des Vorher- oder Nachher- Elements folgendermaßen ändern :

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

Ich habe diese Breite für die Schriftgrößensteuerung verwendet

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

Heutzutage können Sie mit flexbox Ihren Code erheblich vereinfachen und nur 1 Parameter nach Bedarf anpassen:

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

Jetzt können Sie einfach die Breite des Elements anpassen und die Höhe wird automatisch angepasst. Erhöhen / verringern Sie die Breite, bis die Höhe des Elements die gewünschte Anzahl erreicht.

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