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 zum Konfigurieren der lokalen Yum-Quelle in CentOS8
Die Centos8-Distribution wird über die BaseOS- un...
11 Beispiele für die erweiterte Verwendung von Eingabeelementen in Webformularen
1. Löschen Sie das gepunktete Feld, wenn die Scha...
Unterscheiden Sie zwischen Nullwert und leerem Zeichen ('') in MySQL
Bei der täglichen Entwicklung geht es im Allgemei...
Lösung für das Problem mit verstümmelten chinesischen MySQL-Zeichen
1. Die chinesischen verstümmelten Zeichen erschei...
jQuery realisiert den Bildverfolgungseffekt
In diesem Artikel wird der spezifische Code von j...
Analyse des Projektverlaufs bei der Ideenverpackung und beim Hochladen in den Cloud-Dienst
eins. Zuerst müssen Sie es in eine Idee verpacken...
JavaScript-Quellcode für Elimination
JavaScript zum Erreichen der Quellcode-Download-A...
Zusammenfassung der XHTML-Tags auf Blockebene
* Adresse - Adresse * Blockzitat - Blockzitat * Mi...
Win10 Installation Linux System Tutorial Diagramm
Um eine virtuelle Maschine auf einem Windows-Syst...
Praktische Fähigkeiten zur Entwicklung von WeChat-Applets: Datenübertragung und -speicherung
Indem ich die verschiedenen Probleme, auf die ich...
Der derzeit bessere Weg, eine Auswahlliste mit allen Optionen zu erstellen, wenn diese ausgewählt/fokussiert sind
Während der Entwicklung bin ich auf eine solche An...
Zugriffsvorgang im MySQL-Befehlszeilenmodus MySQL-Datenbankvorgang
Nutzungsumgebung Geben Sie im cmd-Modus mysql --v...
Detaillierte Erklärung der Lösung für das Nginx-Panikproblem
In Bezug auf das Nginx-Panikproblem müssen wir zu...
HTML-Beispielcode zum Lesen und Anzeigen von Bildern in einem lokalen Ordner
Ein Zweck Wählen Sie auf der HTML-Seite einen lok...
Detaillierter Installationsprozess und Prinzip des Vue-Routers
Inhaltsverzeichnis 1. Implementierungsprinzip des...