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";

/* <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 eines <string> oder <counter>, dem ein Schrägstrich (/) vorausgeht.

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

none

Wenn auf ein Pseudo-Element angewandt, wird das Pseudo-Element nicht generiert. Wird es auf ein Element angewandt, 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 es den ursprünglichen (oder normalen) Inhalt des Elements. Für reguläre Elemente oder Seitenrandboxen wird es zu den Nachkommen des Elements berechnet. Dies ist der Standardwert.

<string>

Eine Folge von Zeichen, die in übereinstimmende einfache oder doppelte Anführungszeichen eingeschlossen sind. Mehrere Zeichenkettenwerte werden verkettet (es gibt keinen Verkettungsoperator in CSS).

<image>

Ein <image>, das ein darzustellendes Bild repräsentiert. 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 durch <counter-reset> und <counter-increment> Eigenschaften erzeugt wird. 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 gegebenen Namen im Geltungsbereich des gegebenen Pseudo-Elements. Er ist im angegebenen <list-style-type> formatiert (decimal ist der Standardwert).

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 Geltungsbereich des gegebenen Pseudo-Elements, von außen nach innen, getrennt durch die angegebene Zeichenkette. Die Zähler werden im angegebenen <list-style-type> dargestellt (decimal ist der Standardwert).

<quote>

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

open-quote und close-quote

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

no-open-quote und no-close-quote

Fügt keinen Inhalt hinzu, erhöht (oder verringert) jedoch die Verschachtelungsebene für Zitate.

<target>

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

<leader()>

Der <leader()> Datentyp umfasst eine Führungsfunktion: leader( <leader-type> ). Diese Funktion akzeptiert die Schlüsselwortwerte dotted, solid oder space (gleichbedeutend mit leader("."), leader("_") und leader(" "), jeweils) oder einen <string> als Parameter. Wenn sie unterstützt und als Wert für content verwendet wird, wird der angegebene Führungs-Typ als sich wiederholendes Muster eingefügt und visuell Inhalte über eine horizontale Linie hinweg verbinden.

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 ein nicht analysierter String, der den Attributnamen darstellt. Wenn kein Attribut x vorhanden ist, wird ein leerer String zurückgegeben. Die Groß-/Kleinschreibung des Attributnamenparameters hängt von der Dokumentensprache ab.

Alternativer Text: / <string> | <counter>

Alternativer Text kann für ein Bild oder beliebige <content-list> Elemente angegeben werden, indem ein Schrägstrich gefolgt von einer Textzeichenfolge oder einem Zähler hinzugefügt wird. Der alternative Text ist für die Sprachausgabe durch Bildschirmleseprogramme gedacht, kann aber auch in einigen Browsern angezeigt werden. Die / <string> oder / <counter> Datentypen geben den "alt Text" für das Element an.

Formale Definition

Formale Syntax

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

<content-replacement> = 
  <image>  

<content-list> = 
  [ <string> | <counter()> | <counters()> | <content()> | <attr()> ]+  

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

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

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

<image> = 
  <url>       |
  <gradient>  

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

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

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

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

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

<id-selector> = 
  <hash-token>  

<url> = 
  <url()>  |
  <src()>  

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

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

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )  

<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

CSS-generierte Inhalte werden nicht im DOM enthalten. Daher werden sie nicht im Zugänglichkeit-Baum repräsentiert und bestimmte Kombinationen assistiver Technologien/Browser werden sie nicht anzeigen. Wenn der Inhalt Informationen vermittelt, die für das Verständnis des Zwecks der Seite wesentlich sind, ist es besser, ihn im Hauptdokument zu enthalten.

Falls eingefügter Inhalt nicht dekorativ ist, prüfen Sie, ob die Informationen assistiven Technologien zur Verfügung stehen und auch dann verfügbar sind, wenn CSS ausgeschaltet ist.

• Accessibility support for CSS generated content – Tink (2015)
• WCAG, Richtlinie 1.3: Erstellen Sie Inhalte, die auf verschiedene Arten präsentiert werden können
• Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0
• Failure of Success Criterion 1.3.1: inserting non-decorative generated content Techniken für WCAG 2.0

Beispiele

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

Anhängen von Strings 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 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

Zitate

Dieses Beispiel fügt verschiedenfarbige 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ührungen auf der Sprache basiert. Browser fügen standardmäßig offene und geschlossene Zitate vor und nach <q>-Elementen hinzu, sodass die Zitate in diesem Beispiel erscheinen würden, ohne dass sie explizit eingestellt sind. Sie könnten ausgeschaltet werden, indem die entsprechenden content-Eigenschaften auf no-open-quote und no-close-quote gesetzt werden oder indem beide auf none gesetzt werden. Sie können auch ausgeschaltet werden, indem die quotes-Eigenschaft auf none gesetzt wird.

Hinzufügen von Text zu Listenelementzählern

Dieses Beispiel kombiniert einen Zähler, der zwischen zwei <string>s eingefügt wird, die allen Listenelementen vorangestellt sind, um einen detaillierteren Marker für Listenelemente (<li>) in ungeordneten Listen (<ol>) 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 dem Marker jedes Listenelements fügt dem Präfix den Text "item " 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 der verschachtelten geordneten Listen in den meisten Browsern durch einen Punkt (.) getrennt werden.

Zeichenketten mit Attributwerten

Dieses Beispiel ist nützlich für Druckstylesheets. Es verwendet einen Attributselektor, um jeden vollständig qualifizierten sicheren Link auszuwählen und den Wert des href-Attributs nach dem Linktext als 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, dem "URL: " vorangestellt ist, mit einem Leerzeichen, alles in Klammern.

Hinzufügen eines Bildes mit alternativem Text

Dieses Beispiel fügt ein Bild vor allen Links ein. Zwei content-Werte werden bereitgestellt. Der spätere content-Wert enthält ein Bild mit alternativem Text, 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 alternativen Text festzulegen, wird unten angezeigt. Dies legt auch die 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 Bildschirmleser verwenden, sollte er das Wort "MOZILLA" sprechen, wenn er das Bild erreicht. Sie können das ::before Pseudo-Element mit dem Auswahlwerkzeug Ihrer Entwicklerwerkzeuge auswählen und den zugänglichen Namen im Zugänglichkeit-Panel anzeigen.

Ersetzen eines Elements mit URL

Dieses Beispiel ersetzt ein reguläres Element! Der Inhalt des Elements wird durch eine SVG mit dem <url> Typ ersetzt.

Pseudo-Elemente werden bei ersetzten Elementen nicht gerendert. Da dieses Element ersetzt wird, werden Übereinstimmungen von ::after oder ::before nicht generiert oder angewendet. Um dies zu demonstrieren, fügen wir einen ::after-Deklarationsblock hinzu, 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 Inhalten bei regulären Elementen (anstatt nur bei Pseudo-Elementen) wird das gesamte Element ersetzt. Das bedeutet, dass ::before und ::after Pseudo-Elemente nicht generiert werden.

Ersetzen eines Elements mit <gradient>

Dieses Beispiel zeigt, wie die Inhalte eines Elements durch einen beliebigen <image>-Typ ersetzt werden können, in diesem Fall ein CSS-Gradient. Der Inhalt des Elements wird durch ein linear-gradient() ersetzt. Wir geben einen 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

Überprüfen Sie die Browser-Kompatibilitätstabelle. Alle Browser unterstützen Gradienten und alle Browser unterstützen das Ersetzen von Elementen mit Bildern, aber nicht alle Browser unterstützen Gradienten als content-Wert.

Ersetzen eines Elements mit image-set()

Dieses Beispiel ersetzt den Inhalt eines Elements mit einem 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.

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>
• Ersatz-Elemente
• CSS generierte Inhalte Modul
• CSS Listen und Zähler Modul
• Browser-Zugänglichkeits-Panels: Firefox Accessibility inspector, Chrome Accessibility pane, und Safari Accessibility tree