Verwendung von Vorher- und Nachher-Pseudoelementen in CSS

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