:after

Teil 1: Grundlagen

1. Im Gegensatz zu Pseudoklassen wie :active und :hover sind sie alle Pseudoelemente.

2. Die Pseudoelemente :before/:after wurden in CSS2 vorgeschlagen. ::before/::after ist die Schreibweise in CSS3. Es wird erneut vorgeschlagen, zwei Doppelpunkte zur Darstellung von Pseudoelementen zu verwenden, um Pseudoklassen zu unterscheiden.

3. Sie werden nach einem Selektor in CSS verwendet, um dekorativen Inhalt hinzuzufügen, da dadurch Semantik erreicht werden kann. Wenn HTML verwendet wird, um einige Knoten ohne tatsächlichen Inhalt oder zusätzlichen Beispieltext hinzuzufügen, sind sie bedeutungslos.

4. Sie verfügen über ein eindeutiges Attribut „content“, wobei der hinzugefügte Inhalt standardmäßig ein Inline-Element ist.

5. Das erstellte Pseudoelement befindet sich über dem Element, an das es standardmäßig angehängt ist. Wir können z-index:-1; verwenden, um es darunter zu platzieren.

6. Es handelt sich um virtuelle Knoten, nicht um reale Knoten. wie:

 div::nach{
            Inhalt: " ";
            Rand: dünnes, durchgehendes Rot;
        }

Wir können im Browser sehen:

::after ist kein echter Knoten, wird aber häufig auf einigen Websites verwendet.

6. Elemente wie Eingabe, Bild, Iframe usw. können keine anderen Elemente enthalten, daher kann kein Inhalt über Pseudoelemente eingefügt werden.

Teil II: Anwendung

1. Als Trennzeichen verwenden.

 <!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Pseudo-Element</title>
    <Stil>
        A{
            Farbe: blau;
            Textdekoration: keine;
        }
        .log:nach{
            Inhalt: "|";
            Farbe: rot;
        }
    </Stil>
</Kopf>
<Text>
    <a href="" class="log">Anmelden</a><a href="">Registrieren</a>
</body>
</html>

Die Wirkung ist wie folgt:

2. Bilden Sie ein Dreieck

 <!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Pseudo-Element</title>
    <Stil>
        A{
            Farbe: blau;
            Textdekoration: keine;
        }
        .log:vor{
            Inhalt:" ";
            Anzeige: Inline-Block;
            Breite: 0;
            Höhe: 0;
            Rand: 10px durchgehend transparent;
            Rahmen links: 10px durchgehend rot;
        }
    </Stil>
</Kopf>
<Text>
    <a href="" class="log">Anmelden</a>
</body>
</html>

Die Wirkung ist wie folgt:

3. Klares Schweben (der folgende Inhalt stammt von Zhang Xinxu)

 <!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Pseudo-Element</title>
    <Stil>
    .box{padding:10px; Hintergrund:grau;}
    .fix{*zoom:1;}
    .fix:after{display:block; content:"clear"; height:0; clear:both; overflow:hidden; visibility:hidden;}
    .l{float:left;}
    </Stil>
</Kopf>
<Text>
    <div Klasse="Box fix">
    <img class="l" src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" />
</div>
</body>
</html>

Die Wirkung ist wie folgt:

Hinweis: *zoom:1; wird zum Löschen von Floats in IE6 verwendet (wird für das übergeordnete Element des Float-Elements verwendet).

Zusammenfassen

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, dass der Inhalt dieses Artikels Ihnen bei Ihrem Studium oder Ihrer Arbeit hilfreich sein kann. Wenn Sie Fragen haben, können Sie eine Nachricht hinterlassen.

<<: Beispielcode für HTML-Formularkomponente

>>: Implementierung von Wasserfall-Layout + dynamischem Rendering

js-Methode zum Löschen eines Felds in einem Objekt

Tiefes Verständnis der Verwendung von ::before/:before und ::after/:after

js-Methode zum Löschen eines Felds in einem Objekt

Analyse des allgemeinen MySQL-Abfrageprotokolls und des langsamen Abfrageprotokolls

Detaillierte Erläuterung des Prinzips und der Praxis der MySQL-Master-Slave-Replikation

Beispielcode für den Song-Fortschrittsbalken in Vue

Detaillierte Erläuterung der Verwendung von Gulp.js, einem leistungsstarken Tool für die Front-End-Aufgabenerstellung

Detaillierte grafische Beschreibung des MySql8.023-Installationsprozesses (Erstinstallation)

So bedienen Sie Docker und Images

Detaillierte Erläuterung des MySQL-Isolationsebenen-Operationsprozesses (cmd)

Detailliertes Tutorial zum Erstellen einer JMeter+Grafana+Influxdb-Überwachungsplattform mit Docker

Beispielcode zur Implementierung eines Hintergrundunschärfeeffekts mit CSS

Artikel empfehlen

Analyse der Implementierungsschritte für geteilte Festplattenpartitionen unter Linux

So stellen Sie verschiedene Mausformen dar

Vergleich der Vorteile von vue3 und vue2

MySQL-Implementierung für pessimistisches und optimistisches Sperren

MySQL Multi-Instance-Bereitstellungs- und Installationshandbuch unter Linux

So verwenden Sie MQTT im Uniapp-Projekt

Wie können wir für Jiedaibao werben, damit sich jeder anmeldet? Methoden und Fähigkeiten zur Förderung von Jiedaibao

So installieren Sie den Chrome-Browser auf CentOS 7

Implementierung des klassischen CSS-Sticky-Footer-Layouts

VMware Workstation 14 Pro installiert CentOS 7.0

So verwenden Sie die Glog-Protokollbibliothek in einer Linux-Umgebung

Detaillierter Prozess zum Erstellen eines NFS-Servers mithilfe des NFS-Ganesha-Image von Docker

Lösung für den Fehler beim Mounten des freigegebenen Docker-Verzeichnisses unter Windows 10

Nginx-Konfiguration zum Erreichen eines Lastenausgleichs auf mehreren Servern

Häufig verwendete höherwertige Funktionen und umfassende Beispiele in Vue