CSS-Eigenschaft content

Die CSS-Eigenschaft content wird mit den Pseudo-Plementen ::before und ::after verwendet, um einen Content innerhalb eines Elements zu erstellen. Es hat folgende Werte:

  • normal
  • none
  • counter
  • attr
  • string
  • open-quote
  • close-quote
  • no-open-quote
  • no-close-quote
  • url

Die Eigenschaft content muss mit den Pseudo-Plementen ::before und ::after verwendet werden, sonst werden sie nicht generiert und eingefügt. Der Inhalt muss immer hinzugefügt werden.

Die Objekte, die mit der Eigenschaft content eingefügt werden, sind anonym ersetzte Elemente.
Anfangswert normal
Gilt für Pseudo-Elemente ::before und ::after
Geerbt Nein
Animierbar Nein
Version CSS2
DOM Syntax object.style.Content = "none";

Syntax

content: normal | none | counter | attr | string | open-quote | close-quote | no-open-quote | no-close-quote | url | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      p::before { 
      content: "Name -";
      }
      .country::before { 
      content: normal;
      }
    </style>
  </head>
  <h2>Beispiel für die Eigenschaft content</h2>
  <body>
    <p>Ich heiße John</p>
    <p class="country">Ich lebe in Canada</p>
  </body>
</html>

Ein weiteres Beispiel mit dem Wert "string".

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      li:before{
      content:"List item";
      }
      p:after{
      content:" with string value.";
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft content</h2>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    <p>Hier ist ein Absatz</p>
  </body>
</html>

Ein weiteres Beispiel mit "open-quote". Beachten Sie bitte, dass "open-quote" ohne "close-quote" nicht angezeigt werden kann.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      p::before {
      content: open-quote;
      }
      p::after {
      content: close-quote;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft content</h2>
    <p>Hallo, ich heiße John</p>
    <p>Ich komme aus Canada</p>
  </body>
</html>

Werte

Wert Beschreibung
normal Es stellt den Inhalt auf normal ein. Das ist der Standardwert.
none Es stellt den Inhalt auf nothing ein. Das Pseudo-Element wird nicht generiert.
counter Es stellt den Inhalt auf counter ein.
attr Stellt den Inhalt als eines der Attribute der Selektoren ein.
string Es stellt den Inhalt auf text ein.
open-quote Der Wert definiert, dass der Inhalt ein Eröffnungszitat ist.
close-quote Es definiert den Inhalt als Endzitat.
no-open-quote Der Wert wird verwendet, um das Eröffnungszitat aus dem Inhalt zu entfernen.
no-close-quote Der Wert wird verwendet, um das Endzitat aus dem Inhalt zu entfernen.
url Der Wert definiert den Inhalt als Media, genauer als ein Bild, ein Ton oder ein Video. Wenn das Bild nicht angezeigt werden kann, wird es entweder ignoriert oder, es wird ein Platzhalter angezeigt.
initial Es setzt die Eigenschaft auf seinen Standardwert.
inherit Es erbt die Eigenschaft von ihrem übergeordneten Element.

Browser-Support

chrome firefox safari opera
1.0+ 1.0+ 1.0+ 4.0+

Übe dein Wissen

Welche Richtlinien gelten für die Verwendung der CSS-Eigenschaft 'content'?
Finden Sie das nützlich?