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>.
• Ein <content-list>, wenn Pseudoelemente und Randkästen ersetzt werden. Ein <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 als <string> oder <counter>, dem ein Schrägstrich (/) vorangestellt ist.

Die oben genannten Schlüsselwörter und Datentypen werden im Folgenden ausführlicher 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 produziert es den initialen (oder normalen) Inhalt des Elements. Für reguläre Elemente oder Randkästen der Seite wird es zu den Nachkommen des Elements berechnet. Dies ist der Standardwert.

<string>

Eine Folge von Zeichen, die in passenden Einzel- oder Doppelanführungszeichen eingeschlossen sind. Mehrere String-Werte werden konkateniert (es gibt keinen Konkatenationsoperator in CSS).

<image>

Ein <image>, das ein darzustellendes Bild repräsentiert. Dies kann gleichbedeutend mit einem <url>, image-set(), oder <gradient> Datentyp, oder einem Teil der Webseite selbst sein, definiert durch die element() Funktion.

<counter>

Der <counter>-Wert ist ein CSS-Zähler, im Allgemeinen eine durch Berechnungen erzeugte Zahl, die durch die <counter-reset> und <counter-increment> Eigenschaften 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 mit dem angegebenen Namen im Geltungsbereich des gegebenen Pseudoelements. 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 Geltungsbereich des gegebenen Pseudoelements, von äußerem zu innerem, getrennt durch den angegebenen String. Die Zähler werden im angegebenen <list-style-type> gerendert (decimal standardmäßig).

<quote>

Der <quote> Datentyp schließt sprach- und positionsabhängige Schlüsselwörter ein:

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ügt keinen Inhalt ein, erhöht (verringert) jedoch die Verschachtelungsebene für Zitate.

<target>

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

<leader()>

Der <leader()> Datentyp enthält eine Leader-Funktion: leader( <leader-type> ). Diese Funktion akzeptiert die Schlüsselwort-Werte dotted, solid oder space (gleichbedeutend mit leader("."), leader("_") und leader(" "), jeweils), oder einen <string> als Parameter. Wenn unterstützt und als Wert für content verwendet, wird der angegebene Leader-Typ als sich wiederholendes Muster eingefügt, das Inhalte über eine horizontale Linie visuell 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 ein unanalysierter String, der den Attributnamen darstellt. Wenn es kein Attribut x gibt, wird ein leerer String zurückgegeben. Die Groß-/Kleinschreibungsempfindlichkeit des Attributnamenparameters hängt von der Dokumentensprache ab.

Alternativtext: / <string> | <counter>

Alternativtext kann für ein Bild oder alle <content-list>-Elemente durch Anfügen eines Schrägstrichs und dann einer Textzeichenkette oder eines Zählers angegeben werden. Der Alternativtext ist für die Sprachausgabe durch Screenreader vorgesehen, 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> | <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

CSS-generierter Inhalt ist nicht im DOM enthalten. Daher wird er nicht im Barrierebaum repräsentiert und bestimmte Kombinationen von unterstützenden Technologien/Browsern werden ihn nicht ankündigen. Wenn der Inhalt Informationen vermittelt, die zum Verständnis des Zwecks der Seite entscheidend sind, ist es besser, ihn im Hauptdokument einzuschließen.

Wenn eingefügter Inhalt nicht dekorativ ist, prüfen Sie, ob die Informationen den unterstützenden Technologien bereitgestellt werden und auch verfügbar sind, wenn CSS deaktiviert ist.

• Accessibility support for CSS generated content – Tink (2015)
• WCAG, Leitfaden 1.3: Erstellen von Inhalten, die auf verschiedene Arten präsentiert werden können
• Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0
• Fehler des Erfolgskriteriums 1.3.1: Einfügen von nicht dekorativem generiertem Inhalt Techniken für WCAG 2.0

Beispiele

Die ersten fünf Beispiele erzeugen generierten Inhalt auf Pseudoelementen. Die letzten drei sind Beispiele für das Ersetzen von Elementen.

Anfügen 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 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

Zitate

Dieses Beispiel fügt unterschiedlich gefärbte Anführungszeichen um Zitate herum 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 Öffnungs- und Schlusszeichen vor und nach <q>-Elementen hinzu, sodass die Anführungszeichen in diesem Beispiel erscheinen würden, ohne dass sie explizit gesetzt werden. Sie könnten ausgeschaltet werden, indem die jeweiligen content-Eigenschaftswerte auf no-open-quote und no-close-quote oder auf none gesetzt werden. Sie können auch ausgeschaltet werden, indem die quotes-Eigenschaft auf none gesetzt wird.

Hinzufügen von Text zu Listeneintrag-Zählern

Dieses Beispiel kombiniert einen Zähler, der von zwei <string>s eingefasst ist, die allen Listeneinträgen vorangestellt sind, und erzeugt einen detaillierteren Marker für Listeneinträge (<li>) innerhalb ungeordneter Listen (<ol>).

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 Listeneintrag-Marker fügt den Text "item " als Präfix hinzu, einschließlich eines Leerzeichens, um das Präfix vom Zähler zu trennen, dem ": ", ein Doppelpunkt und ein weiteres Leerzeichen folgt. Die counters() Funktion definiert einen numerischen items Zähler, in dem die Zahlen der verschachtelten geordneten Listen in den meisten Browsern durch einen Punkt (.) getrennt sind.

Strings mit Attributwerten

Dieses Beispiel ist nützlich für Ausdrucksstilvorlagen. Es verwendet einen Attributselektor, um jeden vollständig qualifizierten sicheren Link auszuwählen, und fügt den Wert des href-Attributs nach dem Link-Text 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, dem "URL: ", mit einem Leerzeichen vorangestellt, 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 Screenreader 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. Dies setzt auch die Schrift und die 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 Pseudoelement mit Ihrem Entwicklertools-Auswahlwerkzeug auswählen und den zugänglichen Namen im Panel für Barrierefreiheitsfunktionen anzeigen.

Ersetzen eines Elements mit URL

Dieses Beispiel ersetzt ein reguläres Element! Die Inhalte des Elements werden durch eine SVG unter Verwendung des <url> Typs ersetzt.

Pseudoelemente werden auf ersetzten Elementen nicht gerendert. Da dieses Element ersetzt wird, werden keine passenden ::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 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

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

Ersetzen eines Elements mit <gradient>

Dieses Beispiel zeigt, wie die Inhalte eines Elements durch jeden Typ von <image> ersetzt werden können, in diesem Fall durch einen CSS-Gradienten. Die Inhalte des Elements werden durch einen linear-gradient() ersetzt. Wir liefern Alt-Text, weil 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ätsübersicht. 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 durch ein image-set(). Wenn das Anzeigegerät des Benutzers normale Auflösung hat, wird das 1x.png Bild 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>
• Replaced elements
• CSS generierter Inhalt Modul
• CSS Listen und Zähler Modul
• Browser-Barrierefreiheitspanels: Firefox Accessibility-Inspektor, Chrome Accessibility-Paneel, und Safari Accessibility-Baum