Wie kann ich die Größe von Bildern innerhalb von CSS-Pseudoelementen :before/:after ändern?

Ändern der Bildhöhe in CSS :before/:after Pseudo-Elemente

In CSS Pseudo-Elemente (:before und :after) ermöglichen es Ihnen, die Anzeige von Elementen zu verbessern, ohne deren Inhalt direkt zu ändern. Allerdings kann die Anpassung der Bildhöhe innerhalb dieser Pseudoelemente eine Herausforderung darstellen.

Angenommen, Sie möchten Links zu bestimmten Dateitypen mithilfe von Bildern dekorieren. Sie könnten Ihre Links mit einer Klasse definieren und CSS-Regeln einschließen, wie unten gezeigt:

<a href="foo.pdf">

Dieser Ansatz funktioniert zwar effektiv, berücksichtigt jedoch nicht die Möglichkeit, dass das Bild eine ungeeignete Größe für den Linktext hat.

Zunächst können Sie versuchen, die Größe des :after-Bildes mithilfe von CSS zu ändern, aber leider ist dies nicht direkt möglich. Im Gegensatz zu Hintergrundbildern, die mithilfe der Eigenschaft „Hintergrundgröße“ skaliert werden können, bieten Pseudoelemente keinen ähnlichen Größenänderungsmechanismus.

Es gibt jedoch eine Problemumgehung, die eine begrenzte Größenänderung innerhalb von Pseudoelementen ermöglicht:

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

Indem Sie die Hintergrundgröße festlegen und die Breite und Höhe des Blocks angeben, können Sie die Größe des Bildes innerhalb des :after-Pseudoelements effektiv ändern. Es ist wichtig zu beachten, dass dieser Ansatz erfordert, dass für das :after-Pseudoelement etwas Inhalt definiert ist, auch wenn es leer ist („“).

Ausführlichere Informationen finden Sie in der Mozilla Developer Network (MDN)-Kompatibilität Tabelle.

Das obige ist der detaillierte Inhalt vonWie kann ich die Größe von Bildern innerhalb von CSS-Pseudoelementen :before/:after ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!