CSS ::before Pseudo-Element

Definition und Verwendung

CSS ::before Pseudo-Elemente werden verwendet, um vor dem Inhalt eines bestimmten Elements einige Inhalte einzufügen.

Verwenden Sie content Das Attribut gibt den einzufügenden Inhalt an. Der Wert von content kann sein:

• Zeichenfolge: content: "Hallo Welt!";
• Bild: content: url(myimage.jpg);
• Kein Inhalt: content: none;
• Zähler: content: counter(li);
• Anführungszeichen: content: open-quote;
• Attributwert: content: " (" attr(href) ")";

Tipp:Beachten Sie, dass der eingefügte Inhalt immer noch im Inneren des angegebenen Elements liegt. Der eingefügte Inhalt wird vor dem übrigen Inhalt des Elements hinzugefügt.

Verwenden Sie ::after Fügen Sie nach dem Inhalt eines bestimmten Elements einige Inhalte hinzu.

Beispiel

Beispiel 1

Fügen Sie vor dem Inhalt eines jeden <p>-Elements einen String ein:

p::before {
  content: "Lesen Sie dies: ";
}

Probieren Sie es selbst aus

Beispiel 2

Fügen Sie vor dem Inhalt eines jeden <p>-Elements einen String ein und stellen Sie den Stil des eingefügten Inhalts ein:

p::before {
  content: "Lesen Sie dies -";
  background-color: gelb;
  color: rot;
  font-weight: fett;
}

Probieren Sie es selbst aus

CSS-Syntax

::before {
  css-Anweisungen;
}

Technische Details

Browser-Unterstützung

Die Zahlen in der Tabelle geben die erste Browser-Version an, die das Pseudo-Element vollständig unterstützt.

Verwandte Seiten

Tutorial:CSS Pseudo-Element

Referenz:CSS ::after Pseudo-Element