Pseudo-Elemente ::before und ::after in CSS - Ein umfassender Leitfaden

Die CSS-Pseudoelemente `::before` und `::after` fügen vor bzw. nach einem ausgewählten Element Inhalt ein. Zur Darstellung benötigen sie die Eigenschaft `content`, die Zeichenketten, Bild-URLs oder Unicode-Zeichen akzeptiert. Pseudoelemente verhalten sich so, als wären sie dem DOM hinzugefügt, sind aber nicht tatsächlich Teil davon. Dadurch ermöglichen sie die Gestaltung bestimmter Teile eines Elements. Sie erscheinen innerhalb des übergeordneten Elements und eignen sich daher für Container-Elemente, nicht für leere, es sei denn, diese sind in einem Container gekapselt. Sie sind nützlich für Hover-Effekte und kosmetische Verbesserungen. Die Funktion `attr()` ruft Attributwerte eines Elements ab, die innerhalb des Inhalts dieser Pseudoelemente verwendet werden können. Bei Überlappungen liegt `::after` standardmäßig darüber, dies kann jedoch mit `z-index` geändert werden. Diese Elemente sind nicht Teil des DOM-Baums und sollten aufgrund von Barrierefreiheitsbedenken nicht für wichtige Inhalte verwendet werden. Sie sind standardmäßig inline.