: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

Detaillierte Erläuterung zum Hinzufügen von Sicherheitsgruppenregeln zum Alibaba Cloud Server (grafisches Tutorial)

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

Detaillierte Erläuterung zum Hinzufügen von Sicherheitsgruppenregeln zum Alibaba Cloud Server (grafisches Tutorial)

So konfigurieren Sie eine VMware-Umgebung mit mehreren Knoten

Detaillierte Analyse von or, in, union und Indexoptimierung in MySQL

Unsere Gedanken zur Karriere als UI-Ingenieur

SQL Left Join und Right Join - Prinzip und Beispielanalyse

Analyse des Prinzips des Rabbitmq Heartbea-Herzschlagerkennungsmechanismus

Realisieren Sie eine dreistufige Verknüpfung von Jahr, Monat und Tag basierend auf JavaScript

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.17 unter Windows 10

CSS zum Ändern der Größe (Breite, Höhe) des Bildes, wenn die Maus über den Bild-Hyperlink fährt

Analyse der Unfallursachen durch Unicode-Signatur BOM

Artikel empfehlen

Detaillierte Erklärung der Lösung für den 404-Fehler von Tomcat

Webdesign-Tutorial (4): Über Materialien und Ausdrücke

HTML CSS3 streckt den Bildanzeigeeffekt nicht

Detaillierte Erklärung der dynamischen Linkbibliothek, die die C/C++-Methode in Python in Ubuntu aufruft

Lösung für das Problem, dass das Hintergrundbild eines Etiketts im IE8 nicht angezeigt wird

Beherrschen Sie einfach die Verwendung horizontaler Zeilenanmerkungen und Codekommentare in HTML

So verwenden Sie iframe, um die Daten anderer Webseiten unter Wahrung der Kompatibilität anzuwenden

Implementierung eines schwebenden Werbestreifens in HTML und CSS

Führen Sie die Schritte zur Verwendung von mock.js im Vue-Projekt aus

Flammenanimation mit CSS3 umgesetzt

Lösen Sie das Problem verstümmelter chinesischer Zeichen, wenn Sie Daten von Tomcat unter Linux in MySQL einfügen

Lösung für MySQL 8.0 kann nicht gestartet werden 3534

Detaillierte Erklärung der Abkürzung von State in React

HTML-Tabellen-Markup-Tutorial (18): Tabellenkopf

Durchführung der lokalen Migration von Docker-Images