Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

::before (:before)

Dieser Artikel benötigt eine technische Überprüfung. So können Sie helfen.

Ü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

Merkmal Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
:before Unterstützung (Ja) 1.0 (1.7 oder früher)[1] 8.0 4 4.0
::before Unterstützung (Ja) 1.5 (1.8)[1] 9.0 7 4.0
Unterstützung von Animationen und Übergängen 26 4.0 (2.0) Nicht unterstützt Nicht unterstützt Nicht unterstützt
Merkmal Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
:before Unterstützung (Ja) (Ja) ? ? ?
::before Unterstützung (Ja) (Ja) 7.1 ? 5.1
Unterstützung von Animationen und Übergängen 26 4.0 (4.0) Nicht unterstützt Nicht unterstützt Nicht unterstützt

[1] Firefox hat vor Version 3.5 nur die CSS 2.0 Version von :after unterstützt. Nicht erlaubt waren position, float, list-style-* und einige andere Anzeigeeigenschaften. Firefox 3.5 hat diese Beschränkungen aufgehoben.

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

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