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

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.

Answer 2

Anstatt die Breite und Höhe des Hintergrundbildes festzulegen, können Sie die Breite und Höhe des Elements selbst festlegen.

.pdflink::after {
  content: '';
  background-image: url(/images/pdf.png);
  width: 100px;
  height: 100px;
  background-size: contain;
}

Answer 3

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 müssen pdf.png zu 20px * 10px für diese zu arbeiten. Die 20px/10px in der CSS sind hier, um die Größe des Blocks zu geben, so dass die Elemente, die nach dem Block kommen, sind nicht alle mit dem Bild durcheinander

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

Answer 4

Sie können die zoom Eigentum. Prüfen Sie dieses jsfiddle

Answer 5

Heutzutage können Sie mit Flexbox Ihren Code stark 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 einstellen und die Höhe wird automatisch angepasst, indem Sie die Breite vergrößern/verkleinern, bis die Höhe des Elements die von Ihnen benötigte Zahl erreicht hat.