ändern die Bildhöhe in CSS Pseudo-Elements: Ist es möglich? Standardmäßig wird die Größe des Bildes nicht direkt mit CSS unterstützt.

1. Passen Sie die Hintergrundgröße an:

für: After Pseudo-Elemente, passen Sie die Hintergrundgröße an. Stellen Sie jedoch sicher, dass Sie die Breite und Höhe des Blockelements angeben, das das Bild anhand der Breite und der Höheneigenschaften enthält.

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

Achten Sie bei der Verwendung dieser Methode der Browser -Kompatibilität. Weitere Informationen finden Sie in der umfassenden Kompatibilitätstabelle bei MDN.

2. Das Größenänderung des Quellbildes:

Alternativ sollten Sie die Größe des Originalbildes auf die angemessene Server-Seite der Größe in der CSS verwenden. Dies stellt sicher, dass das Bild in den gewünschten Dimensionen angezeigt wird, ohne sich auf Browser -Skalierung zu verlassen.

3. Inline-IMG-Tag:

für einen einfacheren Ansatz ein Inline-Tag neben dem CSS-Pseudo-Element einbeziehen. Dieser Ansatz garantiert, dass das Bild mit der angegebenen Größe rendert, aber vom ursprünglichen Ziel der Minimierung von Markup abweist.