Dieser Artikel stellt Ihnen hauptsächlich verschiedene Verwendungsszenarien von Pseudoelementen vor, die von :before und :after in CSS erstellt wurden, wie z. B. Fülltext, Verwendung als Symbolschriftart, Fortschrittslinie, Zeitleiste und geometrische Figuren.
1. Einführung
1.1 Beschreibung
: before und :after erstellen in CSS ein Pseudoelement, wobei das von : before erstellte Pseudoelement das ausgewählte ist one Das erste untergeordnete Element des Elements und das von :after erstellte Pseudoelement ist das letzte untergeordnete Element des ausgewählten Elements. Der Standardstil der von
:before und :after erstellten Pseudoelemente ist der Inline-Stil.
1.2 Syntax
/* CSS3 */ selector::before /* CSS2 */ selector:before
CSS3 führte :: (zwei Doppelpunkte) ein, um Pseudoklassen (:ein Doppelpunkt) und Pseudoelemente (::zwei Doppelpunkte) zu unterscheiden.
Pseudoklasse: Bedient das Element selbst, z. B. :hover, :first-child, :focus usw.
Pseudoelement: Betreiben Sie die Unterelemente des Elements, z. B. ::before, ::after, ::content usw.
Unterstützt nur :(einen Doppelpunkt) in IE8. Um mit diesen Browsern kompatibel zu sein, können Sie also auch :before und :after verwenden.
1.3 Inhaltsattribut
Das Inhaltsattribut stellt den vom Pseudoelement gefüllten Inhalt dar.
Beispiel
CSS:
.test-p {
width: 100px;
height: 100px;
margin-left: 20px;
background-color: #eee;
}
.test-p::before {
content: "♥";
color: red;
}
.test-p::after {
content: "♥";
color: blue;
}HTML-Seite:
Effekt:
1.4 Ersetzbare Elemente
Ersetztes Element: Seine Darstellung wird nicht durch CSS gesteuert. Bei diesen Elementen handelt es sich um Objekte, deren Aussehen unabhängig von CSS gerendert wird.
Typische austauschbare Elemente sind