Kann ich die Höhe von Bildern innerhalb von CSS-Pseudoelementen :before/:after steuern?

Kann ich die Bildhöhe in CSS :before/:after Pseudo-Elements anpassen?

Ihre Anfrage ist, ob es möglich ist, die Höhe zu ändern eines Bildes, das in einem CSS-Pseudoelement :before/:after verwendet wird. Während die Größe von Hintergrundbildern geändert werden kann, ist nicht sofort klar, ob dies auch für Pseudoelementbilder möglich ist.

Lösung:

Sie können Ihr Ziel teilweise durch Anpassen erreichen die Eigenschaft „Hintergrundgröße“ für das Pseudoelement. Beachten Sie jedoch, dass Sie weiterhin die Breite und Höhe des das Bild umgebenden Blocks definieren müssen:

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

Mit dieser Methode können Sie die Größe des Bildes innerhalb des angegebenen Blocks steuern. Beachten Sie jedoch, dass auch die Gesamtabmessungen des Blocks selbst entsprechend eingestellt werden müssen.

Alternative Lösungen:

Sie haben Vorbehalte gegen die Größenänderung des Quellbildes geäußert oder Ändern des Markups, um ein Inline-IMG-Tag einzuschließen. Wenn jedoch die Kompatibilität Priorität hat, können sich diese Optionen als zuverlässiger erweisen, als sich ausschließlich auf CSS zu verlassen.

Das obige ist der detaillierte Inhalt vonKann ich die Höhe von Bildern innerhalb von CSS-Pseudoelementen :before/:after steuern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!