Ein Pseudo-Element (Doppelpunkt ::) formatiert einen bestimmten Teil eines Elements oder generiert Inhalte, die nicht im HTML vorhanden sind – ohne zusätzliches Markup hinzuzufügen.
{
: ;
}
{
: ;
}
Die content-Eigenschaft ist erforderlich – ohne sie wird das Pseudo-Element nicht gerendert. Der generierte Inhalt ist ein Kind am Anfang (::before) oder am Ende (::after) des Elements.
.tooltip::after {
content: ""; /* empty but present → creates a box */
position: absolute;
border: 8px solid transparent;
border-top-color: black; /* a CSS triangle (tooltip arrow) */
}
Dies ist die klassische Verwendung: Zeichnen von Pfeilen, Abzeichen, Overlays, Verzierungslinien – HTML frei von rein visuellen Elementen halten.
p::first-line { font-weight: bold; } /* the first rendered line */
p::first-letter { font-size: 3em; } /* drop cap */
::selection { background: yellow; } /* highlighted/selected text */
input::placeholder { color: gray; } /* placeholder text */
.x:hover { } /* pseudo-CLASS (state) — one colon */
.x::before { } /* pseudo-ELEMENT (a part) — two colons */
CSS3 führte :: ein, um Pseudo-Elemente von Pseudo-Klassen zu unterscheiden (Browser akzeptieren den einzelnen Doppelpunkt bei den alten aus Kompatibilitätsgründen, aber verwende ::)
Generierter Inhalt wird von einigen Bildschirmleseprogrammen gelesen – platzieren Sie wesentliche Informationen nicht nur in ::before/::after (verwenden Sie es zur Dekoration), und dekorative Symbole gehören am besten nicht in den Zugangsbaum.
Pseudo-Elemente ermöglichen es dir, Symbole, dekorative Formen (Pfeile, Trennlinien), Initialen und Zähler rein in CSS hinzuzufügen – keine zusätzlichen <div>s oder <span>s nötig.
Sie halten das Markup semantisch, während sie reichhaltige visuelle Details ermöglichen, und sind ein Eckpfeiler sauberen, wartbaren Stylings.