Übersicht

::before erzeugt ein Pseudoelement, dass das erste Kind des gematchten Elements ist. Es wird oft zu verwendet, um kosmetische Inhalte unter Verwendung der content Eigenschaft zu einem Element hinzuzufügen. Dieses Element ist standardmäßig inline.

Syntax

/* CSS3 Syntax */
element::before { Stileigenschaften }

/* CSS2 veraltete Syntax (nur benötigt, um IE8 zu unterstützen) */
element:before  { Stileigenschaften }

/* Fügt Inhalte vor jedem <p> Element ein */
p::before { content: "Hallo Welt!"; }

Die ::before Notation (mit zwei Doppelpunkten) wurde in CSS 3 eingeführt, um eine Unterscheidung zwischen Pseudoklassen und Pseudoelementen einzuführen. Browser unterstützen auch die :before Notation, wie sie in CSS 2 eingeführt wurde.

Beispiele

Hinzufügen von Anführungszeichen

Ein einfaches Beispiel für die Verwendung von ::before Pseudoelementen ist das Hinzufügen von Anführungszeichen. Hier werden ::before und ::after verwendet, um Anführungszeichen einzufügen.

HTML Inhalt

<q>Ein paar Anführungszeichen</q>, sagte er, <q>sind besser als keine</q>.

CSS Inhalt

q::before { 
  content: "«";
  color: blue;
}
q::after { 
  content: "»";
  color: red;
}

Ausgabe

Dekoratives Beispiel

Wir können Text oder Bilder innerhalb der content Eigenschaft fast beliebig stylen.

HTML Inhalt

<span class="ribbon">>Beachte, wo die orange Box ist.</span>

CSS content

.ribbon {
  background-color: #5BC8F7;
}

.ribbon::before {
  content: "Sieh dir diese orange Box an.";
  background-color: #FFBA10;
  border-color: black;
  border-style: dotted;
}

Ausgabe

Todo-Liste

In diesem Beispiel erstellen wir eine einfache Todo-Liste mit Hilfe von Pseudoelementen. Diese Methode kann oft dazu verwendet werden, kleine Änderungen an der Benutzerschnittstelle hinzuzufügen und die User Experience zu verbessern.

HTML Inhalt

<ul>
  <li>Milch kaufen</li>
  <li>Mit Hund Gassi gehen</li>
  <li>Trainieren</li>
  <li>Code schreiben</li>
  <li>Musik spielen</li>
  <li>Entspannen</li>
</ul>

CSS Inhalt

li {
  list-style-type: none;
  position: relative;
  margin: 2px;
  padding: 0.5em 0.5em 0.5em 2em;
  background: lightgrey;
  font-family: sans-serif;
}

li.done {
  background: #CCFF99;
}

li.done::before {
  content: '';
  position: absolute;
  border-color: #009933;
  border-style: solid;
  border-width: 0 0.3em 0.25em 0;
  height: 1em;
  top: 1.3em;
  left: 0.6em;
  margin-top: -1em;
  transform: rotate(45deg);
  width: 0.5em;
}

JavaScript Inhalt

var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
  if( ev.target.tagName === 'LI') {
     ev.target.classList.toggle('done'); 
  }
}, false);

Das obige Beispiel ist ein Livebeispiel. Beachte, dass keine Symbole verwendet werden und dass der Haken in Wirklichkeit das ::before ist, dass durch CSS dargestellt wird.

Ausgabe

Hinweise

Obwohl die Fehlerbehebungen in Firefox 3.5 bzgl. Positionierung es nicht erlauben, Inhalte als ein separates, vorheriges Geschwisterelement zu erstellen (wie die CSS Spezifikation sagt "The :before and :after pseudo-elements elements interact with other boxes [...] as if they were real elements inserted just inside their associated element.", etwa: "Die :before- und :after-Pseudo-Elemente interagieren mit anderen Boxen [...] so als wären sie reale Elemente, die in dem dazugehörigen Element eingefügt wären), können Sie dennoch eingesetzt werden um leichte Verbesserungen in tabellenlosen Layouts (z.B. um ein Element zu zentrieren) zu erhalten. Solange der zu zentrierende Inhalt ein Kindelement ist, können eine vorhergehende und nachfolgende Spalte eingefügt werden ohne eigene Elemente dafür zu verwenden (d.h., es ist eventuell semantisch korrekter, wie unten in dem Beispiel, ein zusätzliches span-Element anstelle jeweils eines leeres div-Elements davor und danach einzufügen). (Und denke immer daran, einem gefloateten Element eine Breite zu geben, andernfalls wird es nicht floaten!)

HTML Inhalt

<div class="example">
<span id="floatme">"Davor umflossen" sollte links vom Viewport erstellt werden 
und Umfluss in dieser Zeile nicht erlauben, sie unterhalb zu umfließen. Genauso sollte 
"Danach umflossen" rechts vom Viewport erscheinen und dieser Zeile nicht erlauben, es unterhalb zu umfließen.</span>
</div>

CSS Inhalt

#floatme {
  float: left; width: 50%;
}

/* Um eine leere Spalte zu erhalten, einfach den hexadezimalen Wert für einen nicht umbrechenden Leerraum angeben: \a0 als Attributwert für content (verwende \0000a0 wenn weitere Zeichen folgen) */
.example::before {
  content: "Davor umflossen";
  float: left;
  width: 25%
}
.example::after {
  content: "Danach umflossen";
  float: right;
  width:25%
}

/* For styling */
.example::before, .example::after, .first {
  background: yellow;
  color: red;
}

Ausgabe

Spezifikationen

Spezifikation Status Kommentar
CSS Pseudo-Elements Level 4
Die Definition von '::before' in dieser Spezifikation.
Arbeitsentwurf Keine wesentlichen Änderungen zur vorherigen Spezifikation.
CSS Transitions
Die Definition von 'Übergänge bei Pseudoelement Eigenschaften' in dieser Spezifikation.
Arbeitsentwurf Erlaubt Übergänge bei Eigenschaften, die für Pseudoelemente definiert sind.
CSS Animations
Die Definition von 'Animationen bei Pseudoelement Eigenschaften' in dieser Spezifikation.
Arbeitsentwurf Erlaubt Animationen bei Eigenschaften, die für Pseudoelemente definiert sind.
Selectors Level 3
Die Definition von '::before' in dieser Spezifikation.
Empfehlung Führt die Zwei-Doppelpunkte-Syntax ein.
CSS Level 2 (Revision 1)
Die Definition von '::before' in dieser Spezifikation.
Empfehlung Ursprüngliche Definition, unter Verwendung der Ein-Doppelpunkt-Syntax

Browser Kompatibililtät

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
Grundlegende UnterstützungChrome Vollständige Unterstützung Ja
Vollständige Unterstützung Ja
Vollständige Unterstützung Ja
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: :before
Edge Vollständige Unterstützung Ja
Vollständige Unterstützung Ja
Vollständige Unterstützung Ja
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: :before
Firefox Vollständige Unterstützung 1.5
Hinweise
Vollständige Unterstützung 1.5
Hinweise
Hinweise Before Firefox 57, Firefox had a bug where ::before pseudo-elements were still generated, even if the content property value were set to normal or none.
Hinweise Before Firefox 3.5, only the CSS level 2 behavior of :before was supported, which disallowed position, float, list-style-* and some display properties.
Vollständige Unterstützung 1
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: :before
IE Vollständige Unterstützung 9
Vollständige Unterstützung 9
Vollständige Unterstützung 8
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: :before
Opera Vollständige Unterstützung 7
Vollständige Unterstützung 7
Vollständige Unterstützung 4
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: :before
Safari Vollständige Unterstützung 4
Vollständige Unterstützung 4
Vollständige Unterstützung 4
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: :before
WebView Android Vollständige Unterstützung Ja
Vollständige Unterstützung Ja
Vollständige Unterstützung Ja
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: :before
Chrome Android Vollständige Unterstützung Ja
Vollständige Unterstützung Ja
Vollständige Unterstützung Ja
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: :before
Edge Mobile Vollständige Unterstützung Ja
Vollständige Unterstützung Ja
Vollständige Unterstützung Ja
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: :before
Firefox Android Vollständige Unterstützung Ja
Vollständige Unterstützung Ja
Vollständige Unterstützung Ja
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: :before
Opera Android ? Safari iOS Vollständige Unterstützung 5.1Samsung Internet Android Vollständige Unterstützung Ja
Animation and transition supportChrome Vollständige Unterstützung 26Edge Vollständige Unterstützung JaFirefox Vollständige Unterstützung 4IE Keine Unterstützung NeinOpera Keine Unterstützung NeinSafari Keine Unterstützung NeinWebView Android Vollständige Unterstützung JaChrome Android Vollständige Unterstützung JaEdge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 4Opera Android Keine Unterstützung NeinSafari iOS Keine Unterstützung NeinSamsung Internet Android Vollständige Unterstützung Ja

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.
Verwendet einen nicht standardisierten Namen.
Verwendet einen nicht standardisierten Namen.

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: SJW, LevitatingOrange, Sebastianz, tim_kraut
Zuletzt aktualisiert von: SJW,