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:

• Eins von zwei Schlüsselwörtern: none oder normal. normal ist der Standardwert der Eigenschaft.
• <content-replacement> bei Ersetzung eines DOM-Knotens. <content-replacement> ist immer ein <image>.
• Ein <content-list>, wenn Pseudo-Elemente und Ränder ersetzt werden. Ein <content-list> ist eine Liste von einem oder mehreren anonymen Inline-Boxen, die in der angegebenen Reihenfolge erscheinen. Jedes Element einer <content-list> ist vom Typ <string>, <image>, <counter>, <quote>, <target> oder <leader()>.
• Ein optionaler Alternativtextwert eines <string> oder <counter>, dem ein Schrägstrich (/) vorangestellt ist.

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

none

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

normal

Für die Pseudo-Elemente ::before und ::after wird dieser Wert zu none berechnet. Bei anderen Pseudo-Elementen wie ::marker, ::placeholder oder ::file-selector-button erzeugt er den initialen (oder normalen) Inhalt des Elements. Bei regulären Elementen oder Seitenrändern wird er zu den Nachkommen des Elements berechnet. Dies ist der Standardwert.

<string>

Eine Zeichenkette in passenden einfachen oder doppelten Anführungszeichen. 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 einem Teil der Webseite selbst, definiert durch die element() Funktion.

<counter>

Der Wert <counter> ist ein CSS-Zähler, im Allgemeinen eine Nummer, die durch Berechnungen definiert durch die <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 des angegebenen Namens im aktuellen Geltungsbereich am gegebenen Pseudo-Element. Er wird 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 gegebenen Namen im aktuellen Geltungsbereich am gegebenen Pseudo-Element, von außen nach innen, getrennt durch die angegebene Zeichenkette. Die Zähler werden in dem 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 die entsprechende Zeichenkette aus der quotes Eigenschaft ersetzt.

no-open-quote und no-close-quote

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

<target>

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

<leader()>

Der <leader()> Datentyp umfasst eine Führungsfunktion: leader( <leader-type> ). Diese Funktion akzeptiert die Schlüsselwortwerte dotted, solid oder space (gleichwertig zu leader("."), leader("_") und leader(" ")) oder eine <string> als Parameter. Wenn unterstützt und als Wert für content verwendet, wird der angegebene Führungs-Typ als wiederkehrendes 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 ab, oder des ursprünglichen Elements des Pseudo-Elements. Der Wert des Attributs x des Elements ist eine nicht analysierte Zeichenkette, die den Attributnamen darstellt. Wenn es kein Attribut x gibt, wird eine leere Zeichenkette zurückgegeben. Die Groß-/Kleinschreibungsempfindlichkeit des Attributnamenparameters hängt von der Dokumentsprache ab.

Alternativer Text: / <string> | <counter>

Alternativer Text kann für ein Bild oder jedes <content-list>-Element angegeben werden, indem ein Vorwärts-Slash und dann eine Textzeichenkette oder ein Zähler angefügt werden. Der alternative Text ist für die Sprachausgabe durch Screenreader gedacht, kann aber auch in einigen Browsern angezeigt werden. Die Datentypen / <string> oder / <counter> spezifizieren den "alt text" für das Element.

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 generierter Inhalt ist nicht im DOM enthalten. Daher wird er nicht im Barrierefreiheitsbaum dargestellt und bestimmte assistive Technologien/Browser-Kombinationen geben ihn nicht wieder. Wenn der Inhalt Informationen vermittelt, die entscheidend für das Verständnis des Zwecks der Seite sind, ist es besser, ihn im Hauptdokument zu platzieren.

Wenn eingefügter Inhalt nicht dekorativ ist, vergewissern Sie sich, dass die Informationen assistiven Technologien zur Verfügung stehen und auch verfügbar sind, wenn CSS deaktiviert ist.

• Accessibility support for CSS generated content – Tink (2015)
• WCAG, Leitlinie 1.3: Erstellen Sie Inhalte, die auf unterschiedliche Weisen dargestellt 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 generierten Inhalt auf Pseudo-Elementen. Die letzten drei sind Beispiele für die Elementersetzung.

Hinzufügen 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 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 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 die Art der generierten Anführungszeichen auf der Sprache basiert. Browser fügen standardmäßig vor und nach <q>-Elementen öffnende und schließende Anführungszeichen hinzu, damit würden die Anführungszeichen in diesem Beispiel erscheinen, ohne dass sie explizit gesetzt werden. Sie hätten durch Setzen der entsprechenden content-Eigenschaftswerte auf no-open-quote und no-close-quote, oder indem beide auf none gesetzt werden, ausgeschaltet werden können. 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 zwischen zwei <string>s eingefügten Zähler vor allen Listenelementen, 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 am Marker jedes 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 weiteren Leerzeichen. Die counters() Funktion definiert einen numerischen items Zähler, bei dem die Zahlen der verschachtelten geordneten Listen in den meisten Browsern durch einen Punkt (.) getrennt sind.

Zeichenfolgen 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, indem 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 ein Bild vor allen Links ein. Zwei content-Werte werden bereitgestellt. Der spätere content-Wert enthält ein Bild mit Alternativtext, das ein Screenreader als Sprache ausgeben kann.

HTML

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

CSS

Das CSS, um das Bild anzuzeigen und den Alternativtext festzulegen, wird unten gezeigt. 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 ein Screenreader verwendet wird, 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 Barrierefreiheits-Panel einsehen.

Elemente durch URL ersetzen

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

Pseudo-Elemente werden auf ersetzten Elementen nicht dargestellt. Da dieses Element ersetzt wird, wird jedes passende ::after oder ::before nicht generiert oder angewendet. Um dies zu demonstrieren, enthalten wir einen ::after Deklarationsblock, 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

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

Elemente durch <gradient> ersetzen

Dieses Beispiel demonstriert, wie der Inhalt eines Elements durch jeden Typ von <image> ersetzt werden kann, in diesem Fall ein CSS-Verlauf. Der Inhalt des Elements wird durch einen linear-gradient() ersetzt. Wir geben Alt-Text 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

Überprüfen Sie die Browser-Kompatibilitätsstatistik. 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.

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 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
• Von CSS generierter Inhalt Modul
• CSS-Listen und Zähler Modul
• Barrierefreiheitspanels von Browsern: Firefox Accessibility inspector, Chrome Accessibility pane, und Safari Accessibility tree