Eine ganze Menge erstaunlicher Dinge, die Pseudo-Elemente können tun

Es ist ziemlich erstaunlich, was man mit den Pseudo-Elementen ::before und ::after machen kann. Für jedes Element auf der Seite erhältst du zwei weitere kostenlose, mit denen du fast alles machen kannst, was ein anderes HTML-Element tun könnte. Sie eröffnen eine ganze Reihe interessanter Gestaltungsmöglichkeiten, ohne die Semantik deines Markups negativ zu beeinflussen. Hier sind eine ganze Reihe dieser erstaunlichen Dinge. Eine Zusammenfassung, wenn man so will.

Mehrere Hintergrund-Leinwände zur Verfügung stellen

Da du Pseudo-Elemente absolut relativ zu ihrem Elternelement positionieren kannst, kannst du sie als zwei zusätzliche Ebenen betrachten, mit denen du für jedes Element spielen kannst. Nicolas Gallagher zeigt uns viele Anwendungen davon, einschließlich mehrerer Ränder, Simulation von CSS3-Mehrfachhintergründen und Spalten gleicher Höhe.

Erweitere die Anzahl der Formen, die du mit einem einzigen Element erstellen kannst

Alle oben gezeigten Formen und viele mehr können mit einem einzigen Element erstellt werden, was sie tatsächlich praktisch macht. Im Gegensatz zu diesen "Kaffeebecher mit reinem CSS machen!"-Dingen, die 1.700 divs verwenden, die nett sind, aber nicht praktisch.

Hier ist ein Beispiel für einen sechs-zackigen Stern

#star-six {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
  position: relative;
}
#star-six:after {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid red;
  position: absolute;
  content: "";
  top: 30px;
  left: -50px;
}

URLs von Links in gedruckten Webseiten anzeigen

@media print {
  a[href]:after {
    content: " (" attr(href) ") ";
  }
}

Floats löschen

Anstatt zusätzliches nicht-semantisches Markup einzufügen, um den Float auf Container-Elementen zu löschen, können wir ein Pseudo-Element verwenden, um dies für uns zu tun. Bekannt als "Clearfix", und semantisch mit dem Klassennamen "group" bezeichnet.

.group:before,
.group:after {
  content: "";
  display: table;
}
.group:after {
  clear: both;
}
.group {
  zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}

Float: center simulieren;

Die Eigenschaft float hat keinen Wert von center, obwohl wir uns das sehr wünschen würden. Float hat jedoch links und rechts, und durch die Verwendung von Platzhalter-Pseudo-Elementen können wir einen Bereich zwischen zwei Spalten ausschneiden und dort ein Bild platzieren. Wir können den Effekt simulieren.

Codeblöcke mit der jeweiligen Sprache kennzeichnen

Im aktuellen Design dieser Website werden die Codeblöcke mit der jeweiligen Programmiersprache durch ein Pseudo-Element gekennzeichnet.

pre::after {
  content: attr(rel);
  position: absolute;
  top: 22px;
  right: 12px;
}

Ein komplettes Icon-Set erstellen

Nicolas Gallagher treibt die Idee der Formen auf eine weitere Ebene, indem er eine riesige Sammlung von Icons erstellt, die ohne Bilder auskommen, nur mit Pseudo-Elementen auf (maximal) zwei Elementen pro Icon.

Verfügbaren Platz effizienter nutzen

Was CSS gibt, kann CSS auch wegnehmen. Was ich damit meine ist, dass Pseudo-Element-Inhalte bedingt über Medienabfragen angewendet oder entfernt werden können angewendet oder entfernt werden können. Vielleicht wendet man ein Icon an, wenn der Platz begrenzt ist, und ersetzt es durch ein beschreibenderes Wort, wenn mehr Platz vorhanden ist.

Typografische Verzierungen anwenden

Wenn deine Pseudo-Elemente Text sind, erben sie die gleichen typografischen Stile wie ihr Elternelement. Aber während du ihren Inhalt festlegst, kannst du sie auch stylen. Zum Beispiel, eine andere Schriftart und eine andere Farbe verwenden, um deine Überschriften mit einer Verzierung hervorzuheben.

h2 {
  text-align: center;     
}
h2:before, h2:after {
  font-family: "Some cool font with glyphs", serif;
  content: "\00d7";  /* Some fancy character */
  color: #c83f3f;
}
h2:before {
  margin-right: 10px;
}
h2:after {
  margin-left: 10px;
}

Balken voller Browserbreite erstellen

Wenn du Elemente benötigst, deren Hintergrund sich über die volle Breite erstreckt, deren Inhalt jedoch nicht, bist du oft auf nicht-semantische interne Wrapperelemente oder repetitive und unübersichtliche Abstandsdeklarationen angewiesen. Oder du kannst den Effekt simulieren, indem du die Inhaltsbreite mit einem Element begrenzen und die Kopfzeile bis zu den Rändern mit Pseudo-Elementen reichen lassen.

Einen Körperrahmen erstellen

Mit einem normalen Rahmen links und rechts und fest positionierten Pseudo-Element-Balken oben und unten können wir einen "Body Border"-Effekt erzielen, ohne jegliches dediziertes Markup.

body::before, body::after {
  content: "";
  position: fixed;
  background: #900;
  left: 0;
  right: 0;
  height: 10px;
}
body::before {
  top: 0;
}
body::after {
  bottom: 0;
}
body {
  border-left: 10px solid #900;
  border-right: 10px solid #900;
}

Einen glänzenden Button erstellen

Wenn du ein Pseudo-Element-Block erstellst, das einen transparenten bis weißen bis transparenten Farbverlauf hat, es außerhalb des Buttons positionierst (was es durch versteckte Überläufe verbirgt) und es beim Überfahren mit der Maus über den Button bewegst, kannst du einen Button erstellen, der beim Überfahren mit der Maus etwas Licht zu reflektieren scheint. Nur unterstützt für Firefox, Chrome 26+ und IE10+.

Original von Anton Trollbäck; Pseudo-elementisiert von Nicolas Gallagher; Eine weitere Version von mir.

Eine Seite ausblenden, wenn über einen bestimmten Link gefahren wird

Wenn du die relative Positionierung auf einem Element nicht einstellst, werden absolut positionierte Pseudo-Elemente relativ zum nächsten Elternteil positioniert, der dies tut. Wenn nichts anderes dies tut, wird es relativ zum Wurzelelement sein. Du kannst das nutzen, um ein Element in voller Browserbreite zu erstellen, es unter das Hauptelement zu stapeln und es beim Überfahren mit der Maus aufdecken zu lassen, was einen "Page Fade Out"-Effekt auf einem Link erzeugt.

Einen Header wie ein dreidimensionales Band gestalten

Jeder liebt Bänder! Schau dir diesen Snippet an für das HTML und CSS dafür. Er nutzt einen negativen z-index, was in einigen Fällen ein zusätzliches umschließendes Element erfordert, um zu verhindern, dass das Element unter einem überfüllten Hintergrund verloren geht.

Nummern in geordneten Listen stylen

Hast du jemals versucht, die Nummern in einer geordneten Liste zu stylen? Am Ende macht man dumme Sachen wie die inneren Teile in Spans zu wickeln, die Listenelemente zu stylen, dann dieses Styling mit dem Span zu entfernen. Oder Hintergrundbilder auf verrückte Weise zu verwenden. Oder die Listenformatierung zu entfernen und eigene Nummern einzufügen. All diese Wege sind scheiße. Viel besser ist es, Pseudo-Elemente als Zähler zu verwenden.

Datentabellen responsiv machen

Große Datentabellen sind auf kleinen Bildschirmen furchtbar zu durchsuchen. Entweder sind sie vergrößert und erfordern sowohl vertikales als auch horizontales Scrollen, oder sie sind verkleinert und zu klein zum Lesen. Wir können CSS-Medienabfragen mit Pseudo-Elementen kombinieren, um die Datentabelle responsiv zu machen und sie für eine besser lesbare Ansicht auf kleinen Bildschirmen neu zu formatieren.

Formatierte Tooltips erstellen

Mithilfe eines HTML5-Datenattributs, das dann als Pseudo-Element abgerufen und formatiert wird, können wir vollständig benutzerdefinierte Tooltips durch CSS erstellen.

Trennzeichen zwischen Navigationspunkten hinzufügen

Wenn du ein Navigations-Element vom nächsten unterscheiden möchtest, sind deine Optionen begrenzt: Du kannst einen Rahmen hinzufügen (langweilig) oder zusätzlichen Markup zwischen jedem Element (igitt). Pseudo-Elemente ermöglichen es dir, *beliebigen* Inhalt als Abstandshalter zwischen deinen Elementen zu verwenden.

.menu li:before {
  content: "// ";
  position: relative;
  left: -1px;
}

Eine komplette Website ohne HTML erstellen

Unter Ausnutzung der automatischen Einfügung von <html>, <head> und <body> Tags durch Browser zeigt Mathias Bynens wie man eine Website nur mit CSS und Pseudo-Element-Inhalten erstellt.

Eine reine CSS-Schriftart erstellen

Mit jeweils einem HTML-Element (plus Pseudos) für jeden Buchstaben hat Yusuke Sugomori eine komplette Schriftart über CSS namens CSS Sans erstellt. Die interaktive Demo ermöglicht es dir, all die cleveren Techniken (z. B. Rotation, border-radius und schräg stellen) zu durchsuchen, die Yusuke zur Erstellung jedes Buchstabens verwendet hat.

Die Schriftart ist auf das große lateinische Alphabet beschränkt und sehr schön. Das CSS Sans-Projekt ist eine großartige Demonstration von Kreativität, die auf Einschränkungen aufbaut.