Tiefes Verständnis der Verwendung von ::before/:before und ::after/: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
Artikel empfehlen
Detailliertes Tutorial zur Verwendung des Befehls xargs unter Linux
Hallo zusammen, ich bin Liang Xu. Sind Sie bei de...
CentOS7 verwendet RPM, um MySQL 5.7-Tutorialdiagramm zu installieren
1. Laden Sie 4 RPM-Pakete herunter mysql-communit...
Welche Codes sollte ich beherrschen, wenn ich Webdesign lerne?
In diesem Artikel werden einige der Techniken ausf...
Detaillierte Erklärung zur Verwendung der Element-el-button-Button-Komponente
1. Hintergrund Schaltflächen werden sehr häufig v...
HTML-Grundstruktur_Powernode Java Academy
Wenn wir lernen, Webseiten zu entwickeln, ist das...
Eine kurze Diskussion zur Auftragsrekonstruktion: MySQL-Sharding
Inhaltsverzeichnis 1. Ziele 2. Umweltvorbereitung...
So verwenden Sie die Baidu Map API im Vue-Projekt
Inhaltsverzeichnis 1. Registrieren Sie ein Konto ...
Analyse der Protokolldateien im Tomcat-Protokollverzeichnis (Zusammenfassung)
Bei jedem Start von Tomcat werden die folgenden P...
MySQL 8.0 Upgrade-Erfahrung
Inhaltsverzeichnis Vorwort 1. Deinstallieren Sie ...
Ursachen und Lösungen für den MySQL-Fehler „zu viele Verbindungen“
Inhaltsverzeichnis Kurzzusammenfassung Heute Mitt...
Vollständiges HTML des Upload-Formulars mit Bildvorschau
Das Upload-Formular mit Bildvorschaufunktion, der...
Teilen Sie 12 häufig verwendete Loader in Webpack (Zusammenfassung)
Inhaltsverzeichnis Vorwort Stillader CSS-Lader Sa...
Detaillierte Erläuterung der grundlegenden Verwendung der CentOS7-Firewall unter Linux
1. Grundlegende Verwendung von Firewalld Start-up...
Führen Sie die Schritte zur Installation von Anaconda3 in einer Ubuntu-Umgebung aus
Inhaltsverzeichnis Einführung in Anaconda 1. Heru...
Anwendungsszenario für die MySQL-Konfiguration mehrerer Instanzen
Inhaltsverzeichnis Mehrere MySQL-Instanzen Übersi...