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> beim Ersetzen eines DOM-Knotens. <content-replacement> ist immer ein <image>.
• Eine <content-list> beim Ersetzen von Pseudoelementen und Margenboxen. Eine <content-list> ist eine Liste von einem oder mehreren anonymen Inline-Boxen, die in der angegebenen Reihenfolge erscheinen. Jeder <content-list>-Eintrag ist vom Typ <string>, <image>, <counter>, <quote>, <target> oder <leader()>.
• Ein optionaler alternativer Textwert von einem <string> oder <counter>, dem ein Schrägstrich (/) vorangestellt ist.

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

none

Bei Anwendung auf ein Pseudoelement wird das Pseudoelement nicht generiert. Bei Anwendung auf ein Element hat der Wert keine Wirkung.

normal

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

<string>

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

<image>

Ein <image>, das ein anzuzeigendes Bild darstellt. Dies kann gleichbedeutend mit 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, der im Allgemeinen eine Zahl ist, die durch Berechnungen definiert wird, die durch die Eigenschaften <counter-reset> und <counter-increment> definiert werden. 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 angegebenen Namens im gegebenen Pseudoelement. Er ist im angegebenen <list-style-type> (decimal standardmäßig) formatiert.

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 Bereich des gegebenen Pseudoelements, von außen nach innen, getrennt durch die angegebene Zeichenkette. Die Zähler werden im angegebenen <list-style-type> (decimal standardmäßig) gerendert.

<quote>

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

open-quote und close-quote

Diese Werte werden durch den entsprechenden String aus der quotes Eigenschaft ersetzt.

no-open-quote und no-close-quote

Führt keine Inhalte ein, erhöht (verringert) jedoch die Verschachtelungsebene für Anführungszeichen.

<target>

Der <target> Datentyp umfasst drei Zielfunktionen, <target-counter()>, <target-counters()> und <target-text()>, die Querverweise 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 (gleichbedeutend mit leader("."), leader("_") und leader(" ")), oder ein <string> als Parameter. Wenn unterstützt und als Wert für content verwendet, wird der 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 Pseudoelements ab. Der Wert des Attributs x des Elements ist eine ungeparste Zeichenkette, die den Attributnamen repräsentiert. Wenn es kein Attribut x gibt, wird eine leere Zeichenkette zurückgegeben. Die Groß-/Kleinschreibung des Attributnamenparameters hängt von der Dokumentsprache ab.

Alternativtext: / <string> | <counter>

Ein Alternativtext kann für ein Bild oder beliebige <content-list>-Einträge angegeben werden, indem ein Schrägstrich und dann eine Zeichenkette oder ein Zähler hinzugefügt werden. Der Alternativtext ist für Sprachausgabe durch Bildschirmleser gedacht, kann jedoch 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> | <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-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]>?  

<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 generierte Inhalte sind nicht im DOM enthalten. Daher werden sie nicht im Accessibility Tree dargestellt und bestimmte Kombinationen aus unterstützender Technologie und Browser werden sie nicht bekannt geben. Wenn der Inhalt Informationen vermittelt, die für das Verständnis des Zwecks der Seite entscheidend sind, ist es besser, ihn im Hauptdokument zu inkludieren.

Wenn eingefügter Inhalt nicht dekorativ ist, stellen Sie sicher, dass die Informationen unterstützenden Technologien bereitgestellt werden und auch verfügbar sind, wenn CSS deaktiviert ist.

• Barrierefreiheitsunterstützung für von CSS generierte Inhalte – Tink (2015)
• WCAG, Richtlinie 1.3: Inhalte schaffen, die auf verschiedene Weise präsentiert werden können
• Erfolgskriterium 1.3.1 verstehen | W3C Understanding WCAG 2.0
• Fehler des Erfolgskriteriums 1.3.1: nichtdekorativen generierten Inhalt einfügen Techniken für WCAG 2.0

Beispiele

Die ersten fünf Beispiele erzeugen generierte Inhalte auf Pseudoelementen. Die letzten drei sind Beispiele für Elementersetzung.

Anfügen von Zeichenketten 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 ist 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 generierten Anführungszeichen auf der Sprache basiert. Browser fügen standardmäßig offene und geschlossene Anführungszeichen vor und nach <q>-Elementen hinzu, sodass die Anführungszeichen in diesem Beispiel auch ohne explizite Festlegung erscheinen würden. Sie könnten durch Anpassung der jeweiligen content-Eigenschaften auf no-open-quote und no-close-quote oder durch Festlegen beider auf none ausgeschaltet werden. Sie können auch durch Festlegen der quotes-Eigenschaft auf none ausgeschaltet werden.

Hinzufügen von Text zu Listenelementzählern

Dieses Beispiel kombiniert einen Zähler, der zwischen zwei <string>s an alle Listenelemente vorbereitet wird, wodurch ein detaillierterer Marker für Listenelemente (<li>) in ungeordneten Listen (<ol>) entsteht.

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

Zeichenketten mit Attributwerten

Dieses Beispiel ist nützlich für Druck-Stylesheets. Es verwendet einen Attribut-Selektor, um jeden vollständig qualifizierten sicheren Link auszuwählen und fügt den Wert des href-Attributs nach dem Linktext als Inhalt des ::after Pseudoelements hinzu.

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 mit "URL: ", mit einem Leerraum, alles in Klammern.

Hinzufügen eines Bildes mit alternativem Text

Dieses Beispiel fügt ein Bild vor allen Links ein. Zwei content-Werte sind angegeben. 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 anzuzeigen und den alternativen Text festzulegen, ist unten gezeigt. Dies setzt auch die Schriftart und Farbe für den Inhalt.

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" aussprechen, wenn er das Bild erreicht. Sie können das ::before-Pseudoelement mit Ihrem Entwickler-Werkzeug-Auswahlwerkzeug auswählen und den zugänglichen Namen im Zugänglichkeitspanel ansehen.

Elementersetzung mit URL

Dieses Beispiel ersetzt ein reguläres Element! Die Inhalte des Elements werden durch ein SVG mit dem <url> Typ ersetzt.

Pseudoelemente werden bei ersetzten Elementen nicht gerendert. Da dieses Element ersetzt wird, wird kein passendes ::after oder ::before generiert oder angewendet. Um dies zu demonstrieren, fügen wir einen ::after Deklarationsblock hinzu, der versucht, die id als generierten Inhalt hinzuzufügen. Dieses Pseudoelement 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 generiert werden (anstatt nur auf Pseudoelementen), wird das gesamte Element ersetzt. Dies bedeutet, dass ::before und ::after-Pseudoelemente nicht generiert werden.

Elementersetzung 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. Die Inhalte des Elements werden durch einen linear-gradient() ersetzt. Wir geben einen Alternativtext an, weil alle Bilder für 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 das Browser-Kompatibilitätsdiagramm. Alle Browser unterstützen Gradients und alle Browser unterstützen das Ersetzen von Elementen mit Bildern, aber nicht alle Browser unterstützen Gradients 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 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>
• Ersatz-Elemente
• CSS generierte Inhalte Modul
• CSS Listen und Zähler Modul
• Browser-Barrierefreiheitspanels: Firefox Accessibility inspector, Chrome Accessibility pane, und Safari Accessibility tree