CSS ::before Pseudo-Element

Das ::before-Pseudo-Element ist ein generiertes Inhaltselement, das jegliche Art von Inhalt vor dem Inhalt eines Elements einfügt. Es kann verwendet werden, um Zeichen, Textzeichenfolgen und Bilder einzufügen. Der Wert wird durch die content-Eigenschaft definiert.

Standardmäßig ist das ::before-Pseudo-Element inline.

Dieses Pseudo-Element kann wie jeder andere Inhalt animiert, positioniert oder floatend dargestellt werden.

Das ::before-Pseudo-Element kann auch mit der Notation mit einem einzelnen Doppelpunkt :before verwendet werden, die von allen Browsern unterstützt wird.

Das ::after-Pseudo-Element fügt Inhalt nach jedem anderen Inhalt ein, während das ::before-Pseudo-Element Inhalt vor jedem anderen Inhalt in HTML einfügt.

INFO

Die mit ::after und ::before erstellten Pseudo-Elemente gelten nicht für ersetzte Elemente (z. B. <br>, <img>).

Version

CSS Pseudo-Elements Level 4

Selectors Level 3

Syntax

CSS ::before Pseudo-Element

css

::before {
  css declarations;
}

Beispiel für das ::before-Pseudo-Element:

Sein oder Nichtsein|Beispiel für das CSS ::before Pseudo-Element|W3Docs

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p::before { 
        content: "  William Shakespeare -";
      }
    </style>
  </head>
  <body>
    <h2>::before selector example</h2>
    <p>"Be or not to be".</p>
  </body>
</html>

Try it Yourself »

Im folgenden Beispiel kann der Benutzer dem Inhalt Stile hinzufügen.

Beispiel für das ::before-Pseudo-Element mit formatiertem Inhalt:

William SHakespeare|Beispiel für das CSS ::before Pseudo-Element|W3Docs

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p::before { 
        content: "William Shakespeare-";
        display: inline-block;
        background-color: #ccc;
        color: #666;
        border: 2px dotted #000;
      }
    </style>
  </head>
  <body>
    <h2>::before selector example</h2>
    <p>"Be or not to be".</p>
  </body>
</html>

Try it Yourself »

note
Für rein dekorative Pseudo-Elemente sollte immer content: '' festgelegt werden, um sicherzustellen, dass sie in allen Browsern korrekt gerendert werden.

Praxis

Was macht das '::before'-Pseudo-Element in CSS?

Es fügt Inhalt vor dem Inhalt des ausgewählten Elements ein.Es blendet Inhalt vor dem ausgewählten Element aus.Es ändert die Farbe des ausgewählten Elements.Es wird verwendet, um das ausgewählte Element zu formatieren, bevor andere Stile angewendet werden.

CSS ::before Pseudo-Element ​

Version ​

Syntax ​

Beispiel für das ::before-Pseudo-Element: ​