content CSS property

Probieren Sie es aus

.topic-games::before {
  content: "🎮 " / "games";
}

.topic-weather::before {
  content: "⛅ " / "cloudy";
}

.topic-hot::before {
  content: url("/shared-assets/images/examples/fire.png") / "On fire";
  margin-right: 6px;
}

<p class="topic-games">Game News: A new inFamous is not planned</p>

<p class="topic-weather">
  Weather for Today: Heat, violent storms and twisters
</p>

<p class="topic-hot">Trending Article: Must-watch videos of the week</p>

Syntax

/* Keywords that cannot be combined with other values */
content: normal;
content: none;

/* <content-replacement>: <image> values */
content: url("http://www.example.com/test.png");
content: linear-gradient(#e66465, #9198e5);
content: image-set("image1x.png" 1x, "image2x.png" 2x);

/* speech output: alternative text after a "/"  */
content: url("../img/test.png") / "This is the alt text";
content: counter(chapter) / "Chapter " counter(chapter);

/* <string> value */
content: "unparsed text";

/* <counter> values, optionally with <list-style-type> */
content: counter(chapter_counter);
content: counter(chapter_counter, upper-roman);
content: counters(section_counter, ".");
content: counters(section_counter, ".", decimal-leading-zero);

/* attr() value linked to the HTML attribute value */
content: attr(href);

/* <quote> values */
content: open-quote;
content: close-quote;
content: no-open-quote;
content: no-close-quote;

/* <content-list>: a list of content values. 
Several values can be used simultaneously */
content: "prefix" url("http://www.example.com/test.png");
content: "prefix" url("/img/test.png") "suffix" / "Alt text";
content: open-quote counter(chapter_counter);

/* Global values */
content: inherit;
content: initial;
content: revert;
content: revert-layer;
content: unset;

Werte

Der Wert kann Folgendes sein:

• Eines von zwei Schlüsselwörtern: none oder normal. normal ist der Standardwert der Eigenschaft.
• Ein <content-replacement>, wenn ein DOM-Knoten ersetzt wird. <content-replacement> ist immer ein <image>.
• Eine <content-list>, wenn Pseudo-Elemente und Seitenrandbereiche ersetzt werden. Eine <content-list> ist eine Liste aus einer oder mehreren anonymen Inline-Boxen, die in der angegebenen Reihenfolge erscheinen. Jeder Eintrag der <content-list> hat den Typ <string>, <image>, <counter>, <quote>, <target> oder <leader()>.
• Ein optionaler Alternativtextwert, der <string>, <counter> oder Werte der Funktion attr() enthalten kann und dem ein Schrägstrich (/) vorangestellt ist.

Die oben genannten Schlüsselwörter und Datentypen werden im Folgenden näher beschrieben:

none

Bei einem Pseudo-Element wird dieses nicht generiert. Bei einem Element hat der Wert keine Wirkung.

normal

Bei den Pseudo-Elementen ::before und ::after ergibt dieser Wert den berechneten Wert none. Bei anderen Pseudo-Elementen wie ::marker, ::placeholder oder ::file-selector-button erzeugt er den ursprünglichen (oder normalen) Inhalt des Elements. Bei regulären Elementen oder Seitenrandbereichen ergibt er den berechneten Inhalt der Kindelemente. Dies ist der Standardwert.

<string>

Eine Zeichenfolge, die von passenden einfachen oder doppelten Anführungszeichen umschlossen ist. Mehrere Zeichenfolgenwerte werden aneinandergehängt (in CSS gibt es keinen Verkettungsoperator).

<image>

Ein <image>, das ein anzuzeigendes Bild darstellt. Es kann dem Datentyp <url>, image-set() oder <gradient> entsprechen oder ein Teil der Webseite selbst sein, der durch die Funktion element() definiert wird.

<counter>

Der Wert <counter> ist ein CSS-Zähler, üblicherweise eine Zahl, die durch Berechnungen anhand der Eigenschaften counter-reset und counter-increment entsteht. Er kann mit der Funktion counter() oder counters() angezeigt werden.

counter()

Die Funktion counter() hat zwei Formen: 'counter(name)' und 'counter(name, style)'. Der generierte Text ist der Wert des innersten Zählers mit dem angegebenen Namen, der beim jeweiligen Pseudo-Element gültig ist. Er wird im angegebenen list-style-type formatiert (standardmäßig decimal).

counters()

Auch die Funktion counters() hat zwei Formen: 'counters(name, string)' und 'counters(name, string, style)'. Der generierte Text enthält die Werte aller Zähler mit dem angegebenen Namen, die beim jeweiligen Pseudo-Element gültig sind – vom äußersten bis zum innersten –, getrennt durch die angegebene Zeichenfolge. Die Zähler werden im angegebenen list-style-type gerendert (standardmäßig decimal).

<quote>

Der Datentyp <quote> umfasst sprach- und positionsabhängige Schlüsselwörter:

open-quote und close-quote

Diese Werte werden durch die entsprechende Zeichenfolge aus der Eigenschaft quotes ersetzt.

no-open-quote und no-close-quote

Diese Werte fügen keinen Inhalt ein, erhöhen beziehungsweise verringern aber die Verschachtelungsebene für Anführungszeichen.

<target>

Der Datentyp <target> umfasst drei Zielfunktionen: <target-counter()>, <target-counters()> und <target-text()>. Sie erzeugen Querverweise anhand des Linkziels. Siehe Formale Syntax.

<leader()>

Der Datentyp <leader()> umfasst eine Füllzeichenfunktion: leader( <leader-type> ). Diese Funktion akzeptiert die Schlüsselwörter dotted, solid oder space (entsprechend leader("."), leader("_") beziehungsweise leader(" ")) oder einen <string> als Parameter. Wenn die Funktion unterstützt und als Wert für content verwendet wird, wird der angegebene Füllzeichentyp als sich wiederholendes Muster eingefügt, das Inhalte visuell entlang einer horizontalen Linie verbindet.

attr(x)

Die CSS-Funktion attr(x) ruft den Wert eines Attributs des ausgewählten Elements oder des Ursprungselements des Pseudo-Elements ab. Der Wert des Attributs x des Elements ist eine nicht geparste Zeichenfolge. Wenn kein Attribut x vorhanden ist, wird eine leere Zeichenfolge zurückgegeben. Ob beim Attributnamen zwischen Groß- und Kleinschreibung unterschieden wird, hängt von der Dokumentensprache ab.

Alternativtext: / <string> | <counter> | attr()

Für ein Bild oder beliebige Einträge einer <content-list> kann ein Alternativtext angegeben werden. Dazu wird ein Schrägstrich angehängt, gefolgt von einer Kombination aus Zeichenfolgen, Zählern und attr()-Funktionen. Der Alternativtext ist für die Sprachausgabe durch Screenreader vorgesehen, kann aber in manchen Browsern auch angezeigt werden.

Barrierefreiheit

Durch CSS generierter Inhalt ist nicht im DOM enthalten. Daher erscheint er nicht im Barrierefreiheitsbaum und wird von manchen Kombinationen aus assistiver Technologie und Browser nicht angesagt. Wenn der Inhalt Informationen vermittelt, die für das Verständnis des Zwecks der Seite wesentlich sind, sollten Sie ihn stattdessen in das Hauptdokument aufnehmen.

Wenn eingefügter Inhalt nicht rein dekorativ ist, prüfen Sie, ob die Informationen für assistive Technologien bereitgestellt werden und auch bei deaktiviertem CSS verfügbar sind.

• Unterstützung der Barrierefreiheit für CSS-generierte Inhalte – Tink (2015)
• WCAG, Richtlinie 1.3: Inhalte erstellen, die auf unterschiedliche Weise dargestellt werden können
• Erfolgskriterium 1.3.1 verstehen | W3C Understanding WCAG 2.0
• Verstoß gegen Erfolgskriterium 1.3.1: Einfügen nicht dekorativer generierter Inhalte – Techniken für WCAG 2.0

Formale Definition

Formale Syntax

content = 
  normal                                              |
  none                                                |
  [ <content-replacement> | <content-list> ] [ / <alt-text> ]?  |
  <element()>                                         

<content-replacement> = 
  <image>  

<content-list> = 
  [ <string> | <image> | <attr()> | contents | <quote> | <leader()> | <target> | <string()> | <content()> | <counter> | <symbolic-glyph> ]+  

<alt-text> = 
  [ <string> | <counter> | <attr()> ]+  

<element()> = 
  element( <id-selector> )  

<image> = 
  <url>           |
  <image()>       |
  <image-set()>   |
  <cross-fade()>  |
  <element()>     |
  <gradient>      

<attr()> = 
  attr( <attr-name> <attr-type>? , <declaration-value>? )  

<quote> = 
  open-quote      |
  close-quote     |
  no-open-quote   |
  no-close-quote  

<leader()> = 
  leader( <leader-type> )  

<target> = 
  <target-counter()>   |
  <target-counters()>  |
  <target-text()>      

<string()> = 
  string( <custom-ident> , [ first | start | last | first-except ]? )  

<content()> = 
  content( [ text | before | after | first-letter | marker ]? )  

<counter> = 
  <counter()>   |
  <counters()>  

<symbolic-glyph> = 
  disc               |
  circle             |
  square             |
  disclosure-open    |
  disclosure-closed  

<id-selector> = 
  <hash-token>  

<image()> = 
  image( <image-tags>? [ <image-src>? , <color>? ]! )  

<image-set()> = 
  image-set( <image-set-option># )  

<cross-fade()> = 
  cross-fade( <cf-image># )  

<attr-name> = 
  [ <ident-token>? '|' ]? <ident-token>  

<attr-type> = 
  type( <syntax> )  |
  raw-string        |
  number            |
  <attr-unit>       

<leader-type> = 
  dotted    |
  solid     |
  space     |
  <string>  

<target-counter()> = 
  target-counter( [ <string> | <url> ] , <custom-ident> , <counter-style>? )  

<target-counters()> = 
  target-counters( [ <string> | <url> ] , <custom-ident> , <string> , <counter-style>? )  

<target-text()> = 
  target-text( [ <string> | <url> ] , [ content | before | after | first-letter ]? )  

<counter()> = 
  counter( <counter-name> , <counter-style>? )  

<counters()> = 
  counters( <counter-name> , <string> , <counter-style>? )  

<image-tags> = 
  ltr  |
  rtl  

<image-src> = 
  <url>     |
  <string>  

<image-set-option> = 
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]?  

<cf-image> = 
  [ <image> | <color> ]  &&
  <percentage [0,100]>?  

<syntax> = 
  '*'                                                 |
  <syntax-component> [ <syntax-combinator> <syntax-component> ]*  |
  <syntax-string>                                     

<attr-unit> = 
  <custom-ident>  

<counter-style> = 
  <counter-style-name>  |
  <symbols()>           

<counter-name> = 
  <custom-ident>  

<syntax-component> = 
  <syntax-single-component> <syntax-multiplier>?  |
  '<' transform-list '>'                          

<syntax-combinator> = 
  '|'  

<syntax-string> = 
  <string>  

<counter-style-name> = 
  <custom-ident>  

<symbols()> = 
  symbols( <symbols-type>? [ <string> | <image> ]+ )  

<syntax-single-component> = 
  '<' <syntax-type-name> '>'  |
  <ident>                     

<syntax-multiplier> = 
  '#'  |
  '+'  

<symbols-type> = 
  cyclic      |
  numeric     |
  alphabetic  |
  symbolic    |
  fixed       

<syntax-type-name> = 
  angle               |
  color               |
  custom-ident        |
  image               |
  integer             |
  length              |
  length-percentage   |
  number              |
  percentage          |
  resolution          |
  string              |
  time                |
  url                 |
  transform-function  

Beispiele

Die ersten fünf Beispiele erzeugen Inhalt auf Pseudo-Elementen. Die letzten drei sind Beispiele für das Ersetzen von Elementen.

Zeichenfolgen anhand der Klasse eines Elements anhängen

Dieses Beispiel fügt hinter dem Text von Elementen mit einem bestimmten Klassennamen generierten Text ein. Der Text ist rot eingefärbt.

HTML

<h2>Paperback Best Sellers</h2>
<ol>
  <li>Political Thriller</li>
  <li class="new-entry">Halloween Stories</li>
  <li>My Biography</li>
  <li class="new-entry">Vampire Romance</li>
</ol>

CSS

.new-entry::after {
  content: " New!"; /* The leading space creates separation
                       between the DOM node's content and the generated content
                       being added. */
  color: red;
}

Ergebnis

Anführungszeichen

Dieses Beispiel fügt Anführungszeichen in unterschiedlichen Farben um Zitate ein.

HTML

<p>
  According to Sir Tim Berners-Lee,
  <q cite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet">
    I was lucky enough to invent the Web at the time when the Internet already
    existed - and had for a decade and a half.
  </q>
  We must understand that there is nothing fundamentally wrong with building on
  the contributions of others.
</p>
<p lang="fr-fr">
  Mais c'est Magritte qui a dit,
  <q lang="fr-fr"> Ceci n'est pas une pipe. </q>.
</p>

CSS

q {
  color: blue;
}

q::before,
q::after {
  font-size: larger;
  color: red;
  background: #cccccc;
}

q::before {
  content: open-quote;
}

q::after {
  content: close-quote;
}

Ergebnis

Beachten Sie, dass die Art der generierten Anführungszeichen von der Sprache abhängt. Browser fügen standardmäßig öffnende und schließende Anführungszeichen vor und nach <q>-Elementen ein. Die Anführungszeichen in diesem Beispiel würden daher auch ohne explizite Festlegung erscheinen. Sie könnten unterdrückt werden, indem die jeweiligen Werte der Eigenschaft content auf no-open-quote und no-close-quote oder beide auf none gesetzt werden. Alternativ kann die Eigenschaft quotes auf none gesetzt werden.

Text zu Zählern von Listeneinträgen hinzufügen

Dieses Beispiel kombiniert einen Zähler zwischen zwei <string>-Werten und stellt das Ergebnis allen Listeneinträgen voran. So entsteht eine ausführlichere Markierung für Listeneinträge (<li>) innerhalb ungeordneter Listen (<ol>).

HTML

<ol>
  <li>Dogs</li>
  <li>Cats</li>
  <li>
    Birds
    <ol>
      <li>Owls</li>
      <li>Ducks</li>
      <li>Flightless</li>
    </ol>
  </li>
  <li>Marsupials</li>
</ol>

CSS

ol {
  counter-reset: items;
  margin-left: 2em;
}
li {
  counter-increment: items;
}
li::marker {
  content: "item " counters(items, ".", numeric) ": ";
}

Ergebnis

Der generierte Inhalt in der Markierung jedes Listeneintrags ergänzt den Text „item “ als Präfix. Das Leerzeichen trennt das Präfix vom Zähler, auf den „: “ folgt – ein Doppelpunkt und ein weiteres Leerzeichen. Die Funktion counters() definiert einen numerischen Zähler items. In den meisten Browsern werden die Zahlen verschachtelter geordneter Listen dabei durch einen Punkt (.) getrennt.

Zeichenfolgen mit Attributwerten

Dieses Beispiel ist für Druck-Stylesheets nützlich. Es verwendet einen Attributselektor, um jeden vollständig qualifizierten sicheren Link auszuwählen. Der Wert des Attributs href wird nach dem Linktext als Inhalt des Pseudo-Elements ::after hinzugefügt.

HTML

<ul>
  <li><a href="https://mozilla.com">Mozilla</a></li>
  <li><a href="/">MDN</a></li>
  <li><a href="https://openwebdocs.org">OpenWebDocs</a></li>
</ul>

CSS

a[href^="https://"]::after {
  content: " (URL: " attr(href) ")";
  color: darkgreen;
}

Ergebnis

Der generierte Inhalt ist der Wert des Attributs href, dem „URL: “ mit einem Leerzeichen vorangestellt ist. Der gesamte Inhalt steht in Klammern.

Ein Bild mit Alternativtext hinzufügen

Dieses Beispiel fügt vor allen Links ein Bild ein. Es werden zwei content-Werte angegeben. Der spätere content-Wert enthält ein Bild mit Alternativtext, den ein Screenreader vorlesen kann.

HTML

<a href="https://www.mozilla.org/en-US/">Mozilla Home Page</a>

CSS

Das folgende CSS zeigt das Bild an und legt den Alternativtext fest. Außerdem legt es Schriftart und Farbe für den Inhalt fest.

a::before {
  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") /
    " MOZILLA: ";
}

Ergebnis

Wenn Sie einen Screenreader verwenden, sollte er beim Bild das Wort „MOZILLA“ vorlesen. Sie können das Pseudo-Element ::before mit dem Auswahlwerkzeug Ihrer Entwicklertools auswählen und den zugänglichen Namen im Barrierefreiheitsbereich ansehen.

Zähler in Alternativtext aufnehmen

Dieses Beispiel enthält eine Liste mit Links zu Buchkapiteln. Es zeigt, wie generierter Inhalt verwendet wird, um vor jedem Link ein Buchsymbol und einen Zähler einzufügen. Der Alternativtext enthält anstelle des Symbols das Wort „Chapter“. Dadurch stehen das Wort „Chapter“ und die Kapitelnummer vor dem Text im zugänglichen Namen jedes Links. Sie werden Screenreader-Nutzern vorgelesen, wenn der Link den Fokus erhält.

HTML

Wir fügen eine Überschrift ein, gefolgt von einer geordneten Liste mit Links zu Kapitelüberschriften. Dafür verwenden wir die Elemente <ol>, <li> und <a>.

<h2>Chapter list</h2>
<ol>
  <li><a href="#">A stranger calls</a></li>
  <li><a href="#">Two owls</a></li>
  <li><a href="#">Dinner was bland</a></li>
  <li><a href="#">Three owls</a></li>
  <li><a href="#">No-one answered the door</a></li>
  <li><a href="#">The stranger leaves</a></li>
  <li><a href="#">Bedtime</a></li>
</ol>

CSS

Das CSS enthält ein counter-reset für den Zähler chapter auf dem <ol>-Element. Außerdem erhöhen wir den Zähler chapter auf jedem <li>-Element mit counter-increment und entfernen die Listenmarkierungen, indem wir list-style-type auf none setzen.

ol {
  counter-reset: chapter;
}

li {
  counter-increment: chapter;
  list-style-type: none;
}

Anschließend legen wir für die ::before-Pseudo-Elemente der <a>-Elemente generierten content fest: ein Buch-Emoji als Symbol für ein Kapitel, den aktuellen Wert des Zählers chapter und ein Leerzeichen, das den generierten Inhalt vom Linktext trennt. Schließlich setzen wir den Alternativtext des generierten Inhalts auf den aktuellen Wert des Zählers chapter, dem das Wort „Chapter“ vorangestellt ist.

a::before {
  content: "📖 " counter(chapter) " " / "Chapter " counter(chapter);
}

Ergebnis

Wenn ein Screenreader zu einem Link in der Liste navigiert, sagen unterstützende Browser „Chapter“, gefolgt von der aktuellen Zählernummer und dem Linktext, an – beispielsweise „Chapter 1 A stranger calls“ und „Chapter 2 Two owls“.

Ein Element durch eine URL ersetzen

Dieses Beispiel ersetzt ein reguläres Element! Sein Inhalt wird durch ein SVG des Typs <url> ersetzt.

Pseudo-Elemente werden auf ersetzten Elementen nicht gerendert. Da dieses Element ersetzt wird, werden passende ::after- oder ::before-Pseudo-Elemente weder generiert noch angewendet. Um dies zu veranschaulichen, fügen wir einen ::after-Deklarationsblock hinzu, der versucht, die id als generierten Inhalt einzufügen. Dieses Pseudo-Element wird nicht generiert, weil das Element ersetzt wird.

HTML

<div id="replaced">This content is replaced!</div>

CSS

#replaced {
  content: url("mdn.svg");
}

/* will not show if element replacement is supported */
div::after {
  content: " (" attr(id) ")";
}

Ergebnis

Wenn Inhalt auf regulären Elementen statt nur auf Pseudo-Elementen generiert wird, wird das gesamte Element ersetzt. Das bedeutet, dass die Pseudo-Elemente ::before und ::after nicht generiert werden.

Ein Element durch <gradient> ersetzen

Dieses Beispiel zeigt, wie der Inhalt eines Elements durch einen beliebigen <image>-Typ ersetzt werden kann – hier durch einen CSS-Farbverlauf. Der Inhalt des Elements wird durch einen linear-gradient() ersetzt. Wir geben Alternativtext an, da alle Bilder aus Gründen der Barrierefreiheit beschrieben werden sollten.

HTML

<div id="replaced">I disappear</div>

CSS

div {
  border: 1px solid;
  background-color: #cccccc;
  min-height: 100px;
  min-width: 100px;
}

#replaced {
  content: repeating-linear-gradient(blue 0, orange 10%) /
    "Gradients and alt text are supported";
}

Ergebnis

Sehen Sie sich die Browser-Kompatibilitätstabelle an. Alle Browser unterstützen Farbverläufe und das Ersetzen von Elementen durch Bilder, aber nicht alle unterstützen Farbverläufe als Wert für content.

Ein Element durch image-set() ersetzen

Dieses Beispiel ersetzt den Inhalt eines Elements durch ein image-set(). Wenn der Bildschirm des Nutzers eine normale Auflösung hat, wird 1x.png angezeigt. Auf Bildschirmen mit höherer Auflösung wird das Bild 2x.png angezeigt.

HTML

<div id="replaced">I disappear!</div>

CSS

div {
  width: 100px;
  border: 1px solid lightgrey;
}

#replaced {
  content: image-set(
    "1x.png" 1x,
    "2x.png" 2x
  ) / "DPI";
}

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• ::after
• ::before
• ::marker
• ::scroll-button()
• ::scroll-marker
• :target-current
• contain
• quotes
• <gradient>
• image-set()
• <url>
• Ersetzte Elemente
• Modul CSS-generierter Inhalt
• Modul CSS-Listen und -Zähler
• Barrierefreiheitsbereiche der Browser: Barrierefreiheits-Inspektor von Firefox, Barrierefreiheitsbereich von Chrome und Barrierefreiheitsbaum von Safari