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, vorangestellt durch einen Schrägstrich (/).

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

none

Bei Anwendung auf ein Pseudo-Element wird das Pseudo-Element nicht generiert. Bei Anwendung auf ein Element hat der Wert keine Auswirkung.

normal

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

<string>

Eine Zeichenfolge, die in passende 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 einem <url>, image-set() oder <gradient>-Datentyp entsprechen oder ein Teil der Webseite selbst sein, definiert durch die element()-Funktion.

<counter>

Der <counter>-Wert ist ein CSS-Zähler, in der Regel eine Zahl, die durch Berechnungen erzeugt wird, die durch die Eigenschaften <counter-reset> und <counter-increment> definiert sind. Er kann entweder mit der counter()- oder 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 mit dem angegebenen Namen im Geltungsbereich an dem betreffenden Pseudo-Element. 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 angegebenen Namen im Geltungsbereich an dem betreffenden Pseudo-Element, von äußerstem zu innerstem, getrennt durch die angegebene Zeichenfolge. Die Zähler werden im angegebenen <list-style-type> (decimal standardmäßig) angezeigt.

<quote>

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

open-quote und close-quote

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

no-open-quote und no-close-quote

Fügt keinen Inhalt ein, erhöht (verringert) jedoch die Verschachtelungsebene für Anführungszeichen.

<target>

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

<leader()>

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

attr(x)

Die attr(x)-CSS-Funktion ruft den Wert eines Attributs des ausgewählten Elements oder des Ursprungs-Elements des Pseudo-Elements ab. Der Wert des Attributs x des Elements ist eine nicht analysierte Zeichenfolge, die den Attributnamen darstellt. Wenn es kein Attribut x gibt, wird eine leere Zeichenfolge zurückgegeben. Die Groß- und Kleinschreibung des Attributnamenparameters hängt von der Dokumentsprache ab.

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

Ein Alternativtext kann für ein Bild oder alle <content-list>-Elemente angegeben werden, indem ein Schrägstrich gefolgt von einer Kombination aus Zeichenfolgen, Zählern und attr()-Funktionen hinzugefügt wird. Der Alternativtext ist für die Sprachausgabe durch Bildschirmausleseprogramme gedacht, kann aber 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 repräsentiert und bestimmte Kombinationen aus unterstützender Technologie und Browsern werden ihn nicht ankündigen. Wenn der Inhalt Informationen vermittelt, die entscheidend für das Verständnis des Zwecks der Seite sind, ist es besser, ihn im Hauptdokument zu enthalten.

Wenn eingefügter Inhalt nicht dekorativ ist, überprüfen Sie, ob die Informationen unterstützenden Technologien zur Verfügung gestellt werden und auch verfügbar sind, wenn CSS ausgeschaltet ist.

• Barrierefreiheit-Unterstützung für von CSS generierten Inhalt – Tink (2015)
• WCAG, Leitlinie 1.3: Erstellen Sie Inhalte, die auf unterschiedliche Weise präsentiert werden können
• Verstehen des Erfolgskriteriums 1.3.1 | W3C Understanding WCAG 2.0
• Versagen des Erfolgskriteriums 1.3.1: Einfügen von nicht dekorativem, generiertem Inhalt 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 Elementeersetzungen.

Anhängen von Zeichenfolgen basierend auf der Klasse eines Elements

Dieses Beispiel fügt generierten Text nach dem 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

Anführungszeichen

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 erzeugten Zitate auf der Sprache basiert. Browser fügen standardmäßig vor und nach <q>-Elementen Öffnungs- und Schließungszeichen ein, sodass die Anführungszeichen in diesem Beispiel erscheinen würden, ohne dass sie explizit gesetzt werden. Sie könnten durch das Setzen der jeweiligen content-Eigenschaftswerte auf no-open-quote und no-close-quote oder auf none ausgeschaltet werden. Sie können auch durch das Festlegen der quotes-Eigenschaft auf none ausgeschaltet werden.

Hinzufügen von Text zu Listenelement-Zählern

Dieses Beispiel kombiniert einen Zähler, der zwischen zwei <string>s vor alle Listenelemente (<li>) in ungeordneten Listen (<ol>) eingefügt wird, um ein detaillierteres Markierungszeichen für Listenelemente zu erstellen.

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 der Markierung jedes Listenelements fügt den Text "Element " als Präfix hinzu, einschließlich eines Leerzeichens, um das Präfix vom Zähler zu trennen, dem ": ", ein Doppelpunkt und ein weiteres Leerzeichen folgen. Die counters()-Funktion definiert einen numerischen items-Zähler, bei dem die Nummern verschachtelter geordneter Listen in den meisten Browsern mit einem Punkt (.) getrennt werden.

Zeichenfolgen mit Attributwerten

Dieses Beispiel ist nützlich für Druck-Stylesheets. Es verwendet einen Attribut-Selektor, um jeden voll qualifizierten sicheren Link auszuwählen und den Wert des href-Attributs nach dem Linktext als den Inhalt des ::after-Pseudo-Elements hinzuzufügen.

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 Alternativtext

Dieses Beispiel fügt vor allen Links ein Bild ein. Zwei content-Werte werden angegeben. Der spätere content-Wert enthält ein Bild mit Alternativtext, den ein Bildschirmleser als Sprache ausgeben kann.

HTML

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

CSS

Der CSS-Code, um das Bild zu zeigen und den Alternativtext festzulegen, wird unten gezeigt. Es wird auch 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 er das Wort "MOZILLA" sprechen, wenn er das Bild erreicht. Sie können das ::before-Pseudo-Element mit Ihrem Entwicklertools-Auswahlwerkzeug auswählen und den zugänglichen Namen im Barrierefreiheitspanel anzeigen.

Einfügen von Zählern in Alternativtext

Dieses Beispiel zeigt eine Liste von Links zu einer Reihe von Buchkapiteln und zeigt, wie Sie generierten Inhalt verwenden können, um ein Buchsymbol und einen Zähler vor jedem Kapitel einzufügen, mit Alternativtext, der das Wort "Chapter" anstelle des Symbols enthält. Dies führt dazu, dass das Wort "Chapter" und die Kapitelnummer vor dem Text in jedem Link zugänglicher Name stehen, was Bildschirmlesernutzern angekündigt wird, wenn der Link den Fokus erhält.

HTML

Wir fügen eine Überschrift und gefolgt von einer geordneten Liste von Kapiteltitel-Links mit <ol>, <li> und <a> Elementen ein.

<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 chapter-Zähler auf dem <ol>-Element. Wir inkrementieren auch den chapter-Zähler auf jedem <li>-Element mit counter-increment und entfernen die Listenmarker, indem wir den list-style-type-Wert auf none setzen.

ol {
  counter-reset: chapter;
}

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

Wir setzen dann die ::before-Pseudo-Elemente der <a>-Elemente mit generiertem content gleich einem Buch-Emoji, um ein Kapitel darzustellen, plus den aktuellen chapter-Zählerwert, und einem Leerzeichen, damit der generierte Inhalt vom Linktext getrennt ist. Schließlich setzen wir den Alternativtext des generierten Inhalts auf den aktuellen chapter-Zählerwert, vorangestellt von dem Wort "Chapter".

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

Ergebnis

Wenn ein Bildschirmleser zu einem Link in der Liste navigiert, werden unterstützende Browser "Chapter" gefolgt von der aktuellen Zählernummer sowie dem Linktext ankündigen, zum Beispiel "Chapter 1 A stranger calls" und "Chapter 2 Two owls".

Elementersetzung mit URL

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

Pseudo-Elemente werden bei ersetzten Elementen nicht gerendert. Da dieses Element ersetzt wird, wird kein ::after oder ::before, das darauf zutrifft, generiert oder angewendet. Um dies zu demonstrieren, fügen wir einen ::after-Deklarationsblock ein und versuchen, 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

Wenn Inhalte auf regulären Elementen (anstatt nur auf Pseudo-Elementen) generiert werden, wird das gesamte Element ersetzt. Dies bedeutet, dass ::before und ::after-Pseudo-Elemente nicht generiert werden.

Elementersetzung mit <gradient>

Dieses Beispiel demonstriert, wie die Inhalte eines Elements durch jeden Typ von <image> ersetzt werden können, in diesem Fall ein CSS-Gradient. Die Inhalte des Elements werden durch einen linear-gradient() ersetzt. Wir bieten alternativen Text an, weil alle Bilder der Barrierefreiheit halber 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 das Browser-Kompatibilitätsdiagramm. Alle Browser unterstützen Verläufe und alle Browser unterstützen das Ersetzen von Elementen mit Bildern, aber nicht alle Browser unterstützen Verläufe als content-Wert.

Elementersetzung mit image-set()

Dieses Beispiel ersetzt den Inhalt eines Elements durch ein image-set(). Wenn das Display des Benutzers eine normale Auflösung hat, wird das 1x.png angezeigt. Bildschirme mit einer höheren 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
• Barrierefreiheitspanels der Browser: Firefox Accessibility inspector, Chrome Accessibility pane, und Safari Accessibility tree