Detaillierte Erklärung der allgemeinen Verwendung von Pseudoklassen vor und nach in CSS3

Die Pseudoklasse „Before/After“ entspricht dem Einfügen von zwei zusätzlichen Tags innerhalb eines Elements. Die am besten geeignete und empfohlene Anwendung ist die Grafikerstellung. In einigen anspruchsvollen UI-Implementierungen kann der HTML-Code vereinfacht werden, um die Lesbarkeit und Wartbarkeit zu verbessern. Diese beiden Pseudoklassenanwendungen sind im Ausland recht beliebt und erfolgreich, aber es scheint, dass unseren Front-End-Entwicklern im Allgemeinen das Bewusstsein für die Verwendung dieser beiden Pseudoklassen fehlt. Wenn sie sie verwenden möchten, folgen sie höchstens dem Trend der „Clear Floating“-Anwendung.

1. Grundlegende Verwendung

Die Funktion von :before und :after besteht darin, vor oder nach dem angegebenen Elementinhalt (nicht dem Element selbst) ein Inline-Element einzufügen, das den durch das Inhaltsattribut angegebenen Inhalt enthält. Die grundlegendste Verwendung ist wie folgt:

#beispiel:vor {
    Inhalt: "#";
    Farbe: rot;
}
 
#beispiel:nach {
    Inhalt: "$";
    Farbe: rot;
}

Beide Pseudoklassen gehören zu Inline-Elementen, können aber mit dem Attribut display:block in Blockelemente umgewandelt werden. Die üblichere Verwendung besteht darin , einige Stile zu implementieren und den Schwebeeffekt zu löschen . .

2. Stiländerung

Der Code lautet wie folgt:

<div Klasse="Zitat">
    <span>Kleine Wohnung</span>
</div>
.quote:before,.quote:after{//Verwenden Sie diese beiden Pseudoklassen, um den Stil der Inhaltsdarstellung zu implementieren:"";
     Anzeige: Inline-Block;
     Breite: 5 %;
     Rand: 5px 1 %;
     Rahmen unten: 1px, durchgehend blau;
}

Der Effekt ist in der folgenden Abbildung dargestellt:

3. Schwimmer löschen

Der Code sieht folgendermaßen aus:

<div Klasse="übergeordnet">
    <div Klasse="Box1"></div>
    <div Klasse="box2"></div>
</div>
<div Klasse="Elternteil2">Elternteil2</div>
//css-Code.box1{
     Breite: 300px;
     Höhe: 200px;
     Hintergrundfarbe: hellgrau;
     schweben: links;
}
.box2{
     Breite: 300px;
     Höhe: 100px;
     Hintergrundfarbe: hellblau;
     schweben: links;
}
.parent2{
     Breite: 400px;
     Höhe: 400px;
     Hintergrundfarbe: blau;
     Farbe: #fff;
     Textausrichtung: zentriert;
     Zeilenhöhe: 400px;
     Schriftgröße: 30px;
}

Aufgrund des Schwebeproblems ist der Implementierungseffekt wie folgt:

Wenn Sie dem obigen Code zum Löschen des Floats diesen Code hinzufügen, erzielen Sie einen anderen Effekt:

.parent:nach{
     Inhalt:"";
     display:block; //Auf Blockelement setzen clear:both; //Diese Eigenschaft zum Löschen von Floats verwenden}

Der erzielte Effekt ist in der folgenden Abbildung dargestellt:

Dies ist das Ende dieses Artikels über die allgemeine Verwendung der Pseudoklassen „vorher“ und „nachher“ in CSS3. Weitere relevante CSS3-Pseudoklassen „vorher“ und „nachher“ finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!