CSS-Eigenschaft content

❮ Vorige Nächste ❯

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>

Versuch es selber!

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>

Versuch es selber!

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>

Versuch es selber!

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.