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

Einstellen der background-size ist zulässig. Sie müssen jedoch immer noch 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:"";
}

Die vollständige Kompatibilitätstabelle finden Sie im MDN .

Answer 2

Beachten Sie, dass die :after Pseudo-Element ist ein Kasten, der wiederum das erzeugte Bild enthält. Es gibt keine Möglichkeit, das Bild zu gestalten, aber Sie können den Rahmen gestalten.

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: Man muss die inneren Abmessungen des Bildes kennen, und es bleibt etwas Leerraum, den ich mit ATM nicht loswerden kann.

Answer 3

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

Es gibt zwei Möglichkeiten, die Frage zu beantworten.

Praktisch (zeigen Sie mir einfach das verdammte Bild!)

Vergessen Sie die :after Pseudo-Selektor, und wählen Sie etwas wie

.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 die generierte Inhalte ? Die Antwort lautet: Nein, das kann man nicht. Es gab eine ausführliche Diskussion auf der W3C-Mailingliste zu diesem Thema, aber bis jetzt keine Lösung.

Der generierte Inhalt wird in einen generierten Kasten gerendert, und Sie können diesen Kasten gestalten, aber nicht der Inhalt als solcher . 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 Bildes, verwendet aber die intrinsischen Abmessungen des Bildes für die zweite

firefox und ie unterstützen die erste nicht und verwenden intrinsische di zweite

opera verwendet für beide Fälle intrinsische Dimensionen

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

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

Answer 4

Sie sollten einen Hintergrund anstelle eines Bildes 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;

}

Answer 5

Ja, die ursprüngliche Frage wurde vor acht Jahren gestellt, aber sie ist heute so aktuell wie eh und je. Nun, ich habe mich seit etwa einer Woche mit dem Thema ::vorher, ::nachher beschäftigt, und es hat mich um den Verstand gebracht.

Ausgehend von dieser Seite und anderen zu diesem Thema habe ich es endlich geschafft, ein Bild im Pseudotag zu verkleinern.

** Laufende Anmerkung .colnav ist nur meine Container-Klasse, die eine < UL > und < LI > Reihe von Tags mit einer Reihe von < a hrefs innerhalb hält.

Nachfolgend finden Sie den vollständigen Code

.colnav li.nexus-button a:hover:before {   
    background-image: url('/images/fleur-de-lis.png');
    background-size: 90px 20px;
    background-repeat: no-repeat;
    width: 130px;
    height: 20px;
    margin-left: -120px;
    margin-top: -3px;
    transform: scale(1.5);
    content: "";
    position: absolute;
}

Die Bilddatei war (ist) 120 x 80, und das Bild wurde auf 90 x 20 verkleinert, wo es dann ganz gut hinter den html href-Tag passte, und damit war alles erledigt Position: absolut Anweisung am Ende.