CSS Content-Eigenschaft

Die content-Eigenschaft wird zusammen mit den Pseudo-Elementen ::before und ::after verwendet, um Inhalt innerhalb eines Elements zu erzeugen. Ohne einen expliziten Wert werden diese Pseudo-Elemente überhaupt nicht gerendert — content ist also das, was eine generierte Box überhaupt erst erscheinen lässt.

Diese Seite erklärt, wann und wie man content einsetzt: einfachen Text einfügen, Attributwerte mit attr() abrufen, Elemente mit CSS-Zählern nummerieren, Bilder und Anführungszeichen einbetten — sowie die typischen Fallstricke (etwa dass generierter Text für Screenreader nicht zugänglich ist).

Die Eigenschaft akzeptiert folgende Werte:

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

Info

Text, der mit content eingefügt wird, ist kein Teil des DOM — er lässt sich nicht wie normaler Text markieren, und die Unterstützung durch Hilfstechnologien ist inkonsistent. Verwende ihn nur für dekorative oder ergänzende Inhalte, nicht für Inhalte, die für jeden Leser unbedingt zugänglich sein müssen. Die quotes-Eigenschaft muss auf dem Element gesetzt sein, damit open-quote und close-quote tatsächliche Anführungszeichen rendern.

Anfangswert	normal
Gilt für	::before- und ::after-Pseudo-Elemente.
Vererbbar	Nein.
Animierbar	Nein.
Version	CSS2
DOM-Syntax	element.style.content = "none";

Syntax

Syntax der CSS content-Eigenschaft

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

Beispiel der content-Eigenschaft:

Beispiel der CSS content-Eigenschaft mit dem Wert normal

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p::before {
        content: "Name -";
      }
      .country::before {
        content: normal;
      }
    </style>
  </head>
  <body>
    <h2>Content property example</h2>
    <p>My name is John</p>
    <p class="country">I live in Canada</p>
  </body>
</html>

Probier es selbst »

Ergebnis

Beispiel der content-Eigenschaft mit dem Wert "string":

Beispiel der CSS content-Eigenschaft mit dem Wert string

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      li:before {
        content: "List item";
      }
      p:after {
        content: " with string value.";
      }
    </style>
  </head>
  <body>
    <h2>Content property example</h2>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    <p>Here is some paragraph</p>
  </body>
</html>

Probier es selbst »

Im folgenden Beispiel ist zu sehen, dass open-quote nicht ohne close-quote erscheinen kann.

Beispiel der content-Eigenschaft mit dem Wert "open-quote":

Beispiel der content-Eigenschaft mit den Werten open-quote und close-quote

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        quotes: open-quote close-quote;
      }
      p::before {
        content: open-quote;
      }
      p::after {
        content: close-quote;
      }
    </style>
  </head>
  <body>
    <h2>Content property example</h2>
    <p>Hello, my name is John</p>
    <p>I am from Canada</p>
  </body>
</html>

Probier es selbst »

Beispiel der content-Eigenschaft mit den Werten "open-quote" und "no-close-quote":

Beispiel der content-Eigenschaft mit den Werten "open-quote" und "no-close-quote":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p::before {
        content: open-quote;
      }
      p::after {
        content: no-close-quote;
      }
    </style>
  </head>
  <body>
    <p>Example with content property</p>
  </body>
</html>

Probier es selbst »

Den Wert attr() zum Lesen eines Attributs verwenden

attr() liest den Wert eines HTML-Attributs aus und fügt ihn in den generierten Inhalt ein. Ein häufiger Anwendungsfall ist die Anzeige des Ziels eines Links oder die Darstellung eines data-*-Attributs als tooltip-ähnliche Beschriftung. Der Attributwert wird immer als string behandelt.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a::after {
        content: " (" attr(href) ")";
        color: #888;
      }
    </style>
  </head>
  <body>
    <p>Visit <a href="https://www.w3docs.com">W3docs</a> to learn more.</p>
  </body>
</html>

Dies rendert den Link als Visit W3docs (https://www.w3docs.com) to learn more. — beachte, wie ein string und attr() einfach nebeneinandergeschrieben verknüpft werden.

Zähler zur Nummerierung von Elementen verwenden

CSS-Zähler ermöglichen es, fortlaufende Nummern zu erzeugen, ohne das HTML anfassen zu müssen. Du initialisierst einen Zähler mit counter-reset, erhöhst ihn mit counter-increment und gibst ihn mit der Funktion counter() innerhalb von content aus. Dies ist die idiomatische Methode, um Überschriften, Schritte oder Abbildungen zu nummerieren.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        counter-reset: section;
      }
      h2::before {
        counter-increment: section;
        content: "Section " counter(section) ": ";
      }
    </style>
  </head>
  <body>
    <h2>Introduction</h2>
    <h2>Installation</h2>
    <h2>Usage</h2>
  </body>
</html>

Jedes <h2> wird automatisch mit Section 1: , Section 2: und Section 3: vorangestellt.

Ein Bild mit dem Wert url() einfügen

Der Wert url() bettet eine externe Ressource — typischerweise ein kleines Symbol — in die generierte Box ein. Dies eignet sich gut für dekorative Markierungen, aber da das Bild nicht im DOM enthalten ist, besitzt es keinen Alternativtext. Verwende es daher nicht für bedeutungstragende Bilder.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .external::after {
        content: url("https://www.w3docs.com/build/img/favicon.ico");
        margin-left: 5px;
      }
    </style>
  </head>
  <body>
    <p class="external">A link to an external resource</p>
  </body>
</html>

Warnung

Generierter Inhalt ist standardmäßig dekorativ. Screenreader überspringen ihn möglicherweise oder lesen ihn je nach Browser inkonsistent vor, und Nutzer können ihn nicht kopieren. Platziere niemals Texte, die der Leser unbedingt sehen muss (wie einen Preis oder eine Fehlermeldung), ausschließlich in einem content-Wert.

Werte

Wert	Beschreibung
normal	Setzt den Inhalt auf normal. Dies ist der Standardwert.
none	Setzt den Inhalt auf nichts. Das Pseudo-Element wird nicht erzeugt.
counter	Setzt den Inhalt auf einen Zählerwert.
attr	Setzt den Inhalt auf den Wert eines Attributs des ausgewählten Elements.
string	Setzt den Inhalt auf eine Zeichenkette.
open-quote	Setzt den Inhalt auf ein öffnendes Anführungszeichen.
close-quote	Setzt den Inhalt auf ein schließendes Anführungszeichen.
no-open-quote	Entfernt das öffnende Anführungszeichen aus dem Inhalt.
no-close-quote	Entfernt das schließende Anführungszeichen aus dem Inhalt.
url	Setzt den Inhalt auf eine URL, die auf eine Ressource verweist, z. B. ein Bild, einen Ton oder ein Video. Wenn das Bild nicht angezeigt werden kann, wird es entweder ignoriert oder ein Platzhalter wird angezeigt.
initial	Setzt die Eigenschaft auf ihren Standardwert.
inherit	Erbt die Eigenschaft vom übergeordneten Element.

Übung

Welche Aussagen zur CSS content-Eigenschaft sind korrekt?

Sie wirkt nur auf die ::before- und ::after-Pseudo-Elementeattr() fügt den Wert eines HTML-Attributs als string einMit content erzeugter Text ist wie normaler DOM-Text vollständig markierbar und kopierbarcounter() ermöglicht die Ausgabe eines inkrementierenden CSS-Zählersopen-quote rendert ein Anführungszeichen auch wenn die quotes-Eigenschaft nicht gesetzt ist

Syntax

Beispiel der content-Eigenschaft:

Ergebnis

Beispiel der content-Eigenschaft mit dem Wert "string":

Beispiel der content-Eigenschaft mit dem Wert "open-quote":

Beispiel der content-Eigenschaft mit den Werten "open-quote" und "no-close-quote":

Den Wert attr() zum Lesen eines Attributs verwenden

Zähler zur Nummerierung von Elementen verwenden

Ein Bild mit dem Wert url() einfügen

Werte

Verwandte Eigenschaften

Übung