Wie skaliere ich Bilder in CSS :before/:after Pseudo-Elemente?

Skalieren von Bildern in CSS :before/:after Pseudo-Elemente

Das Dekorieren von Links mit Bildern mithilfe von Pseudoelementen erhöht die visuelle Attraktivität. Wenn die Bildabmessungen jedoch nicht mit dem Linktext übereinstimmen, muss die Bildhöhe geändert werden.

Syntax für die Bildhöhenskalierung

Im Gegensatz zu Hintergrundbildern Pseudoelementbilder können mithilfe der Eigenschaft „Hintergrundgröße“ skaliert werden. Dies erfordert jedoch die Angabe der Breite und Höhe des enthaltenden Blocks.

Das korrigierte CSS wäre:

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

In diesem Code:

• Hintergrund- Größe: 10px 20px; skaliert das Bild auf 10 Pixel Breite und 20 Pixel Höhe.
• display: inline-block; stellt sicher, dass sich das Pseudoelement wie ein Inline-Element verhält.
• width: 10px; Höhe: 20px; Definieren Sie die Abmessungen des enthaltenden Blocks.
• content: ""; verbirgt alle Standardinhalte im Pseudoelement.

Kompatibilität

Informationen zur Unterstützung verschiedener Browser finden Sie in der MDN-Kompatibilitätstabelle.

Das obige ist der detaillierte Inhalt vonWie skaliere ich Bilder in CSS :before/:after Pseudo-Elemente?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!