Zum Inhalt springen

#content

Definiert den Textinhalt der Pseudo-Elemente :before und :after.

default content: normal;

Dem Element wird kein Inhalt hinzugefügt.

content: "Foo bar";

In Anbetracht dieses HTML-Elements:

<p class="element">
  Hello world
</p>

Und dieses CSS:

.element:before {
  content: "Foo bar";
}

Der Textinhalt wird dem Inhalt des Elements vorangestellt.

Beachten Sie, wie das Endergebnis Text aus dem HTML und Text aus dem CSS kombiniert.

content: url(/images/jt.png);

Sie können Bilder einfügen, indem Sie die Funktion url() verwenden.

content: attr(data-something);

In Anbetracht dieses HTML-Elements:

<p class="element" data-something="cssreference">
  Hello world
</p>

Und dieses CSS:

.element:before {
  content: attr(data-something);
}

Das Element wird den Textinhalt aus dem HTML Attribut übernehmen.

Nach oben