content

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 sein:

• Eines von zwei Schlüsselwörtern: none oder normal. normal ist der Standardwert der Eigenschaft.
• <content-replacement>, wenn ein DOM-Knoten ersetzt wird. <content-replacement> ist immer ein <image>.
• Eine <content-list>, wenn Pseudo-Elemente und Randboxen ersetzt werden. Eine <content-list> ist eine Liste von einem oder mehreren anonymen Inline-Boxen, die in der angegebenen Reihenfolge erscheinen. Jedes <content-list>-Element ist vom Typ <string>, <image>, <counter>, <quote>, <target> oder <leader()>.
• Ein optionaler alternativer Textwert, der <string>, <counter> oder attr()-Funktionswerte enthalten kann, gefolgt von einem Schrägstrich (/).

Die oben genannten Schlüsselwörter und Datentypen werden im Folgenden ausführlicher beschrieben:

none

Wird ein Pseudo-Element angewendet, wird das Pseudo-Element nicht generiert. Wird auf ein Element angewendet, hat der Wert keine Wirkung.

normal

Für die ::before- und ::after-Pseudo-Elemente berechnet sich dieser Wert zu none. Für andere Pseudo-Elemente wie ::marker, ::placeholder oder ::file-selector-button wird der ursprüngliche (oder normale) Inhalt des Elements erzeugt. Für reguläre Elemente oder Seitenrandboxen berechnet sich der Wert auf die Nachfahren des Elements. Dies ist der Standardwert.

<string>

Eine Zeichenfolge, die in übereinstimmende einfache oder doppelte Anführungszeichen eingeschlossen ist. Mehrere Zeichenfolgenwerte werden verkettet (es gibt keinen Verkettungsoperator in CSS).

<image>

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

<counter>

Der <counter>-Wert ist ein CSS-Zähler, im Allgemeinen eine Zahl, die durch Berechnungen definiert wird, die durch die Eigenschaften <counter-reset> und <counter-increment> definiert sind. Er kann entweder mit der counter()- oder der counters()-Funktion angezeigt werden.

counter()

Die counter()-Funktion hat zwei Formen: 'counter(name)' oder 'counter(name, style)'. Der generierte Text ist der Wert des innersten Zählers des gegebenen Namens im Bereich des gegebenen Pseudo-Elements. Er wird im angegebenen <list-style-type> formatiert (decimal standardmäßig).

counters()

Die counters()-Funktion hat ebenfalls zwei Formen: 'counters(name, string)' oder 'counters(name, string, style)'. Der generierte Text ist der Wert aller Zähler mit dem gegebenen Namen im Bereich des gegebenen Pseudo-Elements, von außen nach innen, getrennt durch die angegebene Zeichenkette. Die Zähler werden im angegebenen <list-style-type> angezeigt (decimal standardmäßig).

<quote>

Der <quote> Datentyp enthält Sprach- und Positionsabhängige Schlüsselwörter:

open-quote und close-quote

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

no-open-quote und no-close-quote

Keinen Inhalt einführen, sondern die Verschachtelungsebene für Anführungszeichen erhöhen (verringern).

<target>

Der <target>-Datentyp umfasst drei Ziel-Funktionen, <target-counter()>, <target-counters()> und <target-text()>, die Kreuzreferenzen erzeugen, die vom Zielende eines Links erhalten werden. Siehe Formale Syntax.

<leader()>

Der <leader()>-Datentyp umfasst eine Leader-Funktion: leader( <leader-type> ). Diese Funktion akzeptiert die Schlüsselwortwerte dotted, solid oder space (entspricht leader("."), leader("_") und leader(" ")), oder eine <string> als Parameter. Wenn sie unterstützt wird und als Wert für content verwendet wird, wird der bereitgestellte Leader-Typ als wiederholendes Muster eingefügt, das den Inhalt visuell über eine horizontale Linie verbindet.

attr(x)

Die attr(x) CSS-Funktion 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 ungeparste Zeichenfolge, die den Attributnamen darstellt. Wenn kein Attribut x vorhanden ist, wird eine leere Zeichenfolge zurückgegeben. Die Groß-/Kleinschreibung des Attributnamens hängt von der Dokumentensprache ab.

Alternativer Text: / <string> | <counter> | attr()

Alternativer Text kann für ein Bild oder beliebige <content-list>-Elemente angegeben werden, indem ein Schrägstrich gefolgt von einer Kombination aus Zeichenketten, Zählern und attr()-Funktionen hinzugefügt wird. Der alternative Text ist für die Sprachausgabe durch Bildschirmlesegeräte gedacht, kann jedoch auch in einigen Browsern angezeigt werden.

Formale Definition

Formale Syntax

content = 
  normal                                              |
  none                                                |
  [ <content-replacement> | <content-list> ] [ / [ <string> | <counter> | <attr()> ]+ ]?  |
  <element()>                                         

<content-replacement> = 
  <image>  

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

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

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

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

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

<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( <counter-name> , <counter-style>? )  

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

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

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

<id-selector> = 
  <hash-token>  

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

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

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

<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-name> = 
  <custom-ident>  

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

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

<image-tags> = 
  ltr  |
  rtl  

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

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

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

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

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

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

<syntax-combinator> = 
  '|'  

<syntax-string> = 
  <string>  

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

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

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

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

Barrierefreiheit

Von CSS generierter Inhalt ist nicht im DOM enthalten. Daher wird er nicht im Barrierefreiheitsbaum dargestellt und bestimmte Kombinationen aus unterstützender Technologie/Browser werden ihn nicht ankündigen. Wenn der Inhalt Informationen enthält, die entscheidend zum Verständnis des Zwecks der Seite beitragen, ist es besser, ihn im Hauptdokument zu integrieren.

Wenn eingefügter Inhalt nicht dekorativ ist, stellen Sie sicher, dass die Informationen unterstützenden Technologien zur Verfügung stehen und auch dann verfügbar sind, wenn CSS deaktiviert ist.

• Unterstützung der Barrierefreiheit für CSS-generierten Inhalt – Tink (2015)
• WCAG, Leitfaden 1.3: Erstellen von Inhalten, die auf unterschiedliche Weise präsentiert werden können
• Erklärung des Erfolgskriteriums 1.3.1 | W3C Understanding WCAG 2.0
• Fehlschlag des Erfolgskriteriums 1.3.1: Einfügen von nicht dekorativen generierten Inhalten Techniken für WCAG 2.0

Beispiele

Die ersten fünf Beispiele erstellen generierten Inhalt auf Pseudo-Elementen. Die letzten drei sind Beispiele für den Elementaustausch.

Anhängen von Zeichenfolgen basierend auf der Klasse eines Elements

Dieses Beispiel fügt generierten Text hinter den Text von Elementen ein, die einen bestimmten Klassennamen haben. Der Text wird rot gefä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

Zitate

Dieses Beispiel fügt unterschiedlich gefärbte Anführungszeichen 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 der Typ der generierten Anführungszeichen auf der Sprache basiert. Browser fügen standardmäßig vor und nach <q>-Elementen offene und geschlossene Anführungszeichen ein, sodass die Anführungszeichen in diesem Beispiel erscheinen, ohne dass sie explizit festgelegt werden. Sie könnten durch das Setzen der jeweiligen content-Eigenschaftswerte auf no-open-quote und no-close-quote oder durch Setzen beider auf none deaktiviert werden. Sie können auch durch das Setzen der quotes-Eigenschaft auf none deaktiviert werden.

Hinzufügen von Text zu Listenelement-Zählern

Dieses Beispiel kombiniert einen Zähler, der zwischen zwei <string>s eingefügt ist, vor alle Listenelemente, wodurch ein detaillierterer Marker für Listenelemente (<li>) innerhalb ungeordneter Listen (<ol>) erstellt wird.

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 auf jedem Marker eines Listenelements fügt den Text "item " als Präfix hinzu, einschließlich eines Leerzeichens, um das Präfix vom Zähler zu trennen, gefolgt von ": ", einem Doppelpunkt und einem zusätzlichen Leerzeichen. Die counters()-Funktion definiert einen numerischen items-Zähler, bei dem die Nummern verschachtelter geordneter Listen in den meisten Browsern mit einem Punkt (.) getrennt sind.

Zeichenfolgen mit Attributwerten

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

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 href-Attributs, vorangestellt von "URL: ", mit einem Leerzeichen, alles in Klammern.

Hinzufügen eines Bildes mit alternativem Text

Dieses Beispiel fügt vor allen Links ein Bild ein. Zwei content-Werte werden bereitgestellt. Der spätere content-Wert enthält ein Bild mit alternativem Text, den ein Bildschirmlesegerät als Sprache ausgeben kann.

HTML

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

CSS

Der CSS-Code, um das Bild anzuzeigen und den alternativen Text festzulegen, wird unten gezeigt. Ebenso sind die Schriftart und Farbe für den Inhalt festgelegt.

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

Ergebnis

Wenn Sie einen Bildschirmleser verwenden, sollte dieser beim Erreichen des Bildes das Wort "MOZILLA" aussprechen. Sie können das ::before-Pseudo-Element mit Ihrem Entwicklertools-Auswahlwerkzeug auswählen und den zugänglichen Namen im Barrierefreiheitspanel einsehen.

Einschließen von Zählern im alternativen Text

Dieses Beispiel zeigt eine Liste von Links zu einem Set von Buchkapiteln und zeigt, wie man mit generiertem Inhalt ein Buch-Icon und einen Zähler vor jedem einfügt, mit alternativem Text, der das Wort "Kapitel" anstelle des Icons enthält. Dies führt dazu, dass das Wort "Kapitel" und die Kapitelnummer dem Text in jedem Link's zugänglichen Namen vorangehen, der von Bildschirmlesern mitgeteilt wird, wenn der Link den Fokus erhält.

HTML

Wir fügen eine Überschrift gefolgt von einer geordneten Liste von Kapitel-Titel-Links unter Verwendung von <ol>, <li> und <a>-Elementen hinzu.

<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 beinhaltet einen counter-reset für den chapter-Zähler auf dem <ol>-Element. Wir erhöhen auch den chapter-Zähler auf jedem <li>-Element mit counter-increment und entfernen die Listensymbole, indem wir einen list-style-type-Wert von none festlegen.

ol {
  counter-reset: chapter;
}

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

Anschließend setzen wir die ::before-Pseudo-Elemente der <a>-Elemente auf generierten content, der gleich einem Buch-Emoji zur Darstellung eines Kapitels ist, plus dem aktuellen chapter-Zählerwert und einem Leerzeichen, so dass der generierte Inhalt vom Linktext getrennt ist. Schließlich setzen wir den alternativen Text des generierten Inhalts auf den aktuellen chapter-Zählerwert, vorangestellt von dem Wort "Kapitel".

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

Ergebnis

Wenn ein Bildschirmleser zu einem Link innerhalb der Liste navigiert, werden unterstützende Browser "Kapitel" gefolgt von der aktuellen Zählernummer, gefolgt vom Linktext ankündigen, zum Beispiel "Kapitel 1 Ein Fremder ruft an" und "Kapitel 2 Zwei Eulen".

Ersetzen von Elementen mit URL

Dieses Beispiel ersetzt ein reguläres Element! Die Inhalte des Elements werden durch ein SVG ersetzt, indem der <url>-Typ verwendet wird.

Pseudo-Elemente werden auf ersetzten Elementen nicht dargestellt. Da dieses Element ersetzt wird, wird kein übereinstimmendes ::after oder ::before generiert oder angewendet. Um dies zu demonstrieren, fügen wir einen ::after-Deklarationsblock ein, der versucht, die id als generierten Inhalt hinzuzufügen. Dieses Pseudo-Element wird nicht generiert, da 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

Beim Generieren von Inhalt auf regulären Elementen (anstatt nur auf Pseudo-Elementen) wird das gesamte Element ersetzt. Das bedeutet, dass ::before- und ::after-Pseudo-Elemente nicht generiert werden.

Ersetzen von Elementen mit <gradient>

Dieses Beispiel demonstriert, wie der Inhalt eines Elements durch jeden Typ von <image> ersetzt werden kann, in diesem Fall ein CSS-Gradient. Die Inhalte des Elements werden durch einen linear-gradient() ersetzt. Wir geben alternativen Text an, weil alle Bilder zur 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

Prüfen Sie die Browser-Kompatibilitätsübersicht. Alle Browser unterstützen Gradienten und alle Browser unterstützen das Ersetzen von Elementen durch Bilder, aber nicht alle Browser unterstützen Gradienten als content-Wert.

Ersetzen von Elementen mit image-set()

Dieses Beispiel ersetzt den Inhalt eines Elements mit einem image-set(). Wenn das Display des Nutzers eine normale Auflösung hat, wird das 1x.png angezeigt. Bildschirme mit höherer Auflösung zeigen das 2x.png Bild an.

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
• CSS-generierter Inhalt Modul
• CSS-Listen und Zähler Modul
• Browser Barrierefreiheitspanels: Firefox Barrierefreiheitsinspektor, Chrome Accessibility-Paneel und Safari Accessibility-Baum