content CSS property

Probieren Sie es aus

.topic-games::before {
  content: "🎮 " / "games";
}

.topic-weather::before {
  content: "⛅ " / "cloudy";
}

.topic-hot::before {
  content: url("https://developer.mozilla.org/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("https://developer.mozilla.org/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("https://developer.mozilla.org/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 Marginboxes 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, gefolgt von einem Schrägstrich (/).

Die oben erwähnten Schlüsselwörter und Datentypen werden weiter unten detaillierter beschrieben:

none

Wird dies auf ein Pseudo-Element angewendet, wird das Pseudo-Element nicht generiert. Wird dies auf ein Element angewendet, hat der Wert keine Wirkung.

normal

Bei den ::before und ::after Pseudo-Elementen wird dieser Wert zu none berechnet. Bei anderen Pseudo-Elementen wie ::marker, ::placeholder oder ::file-selector-button wird der initiale (normale) Inhalt des Elements erzeugt. Für reguläre Elemente oder Seitenrandboxen wird der Wert zu den Nachkommen des Elements berechnet. Dies ist der Standardwert.

<string>

Eine Zeichenfolge in übereinstimmenden einfachen oder doppelten Anführungszeichen. Mehrere Zeichenfolgenwerte werden aneinandergereiht (es gibt keinen Verkettungsoperator in CSS).

<image>

Ein <image>, das ein anzuzeigendes Bild darstellt. 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, in der Regel eine Zahl, die durch Berechnungen definiert wird, die von den Eigenschaften counter-reset und counter-increment angegeben 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 erzeugte Text ist der Wert des innersten Zählers des angegebenen Namens im Geltungsbereich des angegebenen Pseudo-Elements. 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 erzeugte Text ist der Wert aller Zähler mit dem angegebenen Namen im Bereich des angegebenen Pseudo-Elements, von außen nach innen, getrennt durch den angegebenen String. Die Zähler werden in dem angegebenen list-style-type (decimal standardmäßig) gerendert.

<quote>

Der <quote> Datentyp enthält 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 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 Formal syntax.

<leader()>

Der <leader()> Datentyp enthält eine Führungsfunktion: leader( <leader-type> ). Diese Funktion akzeptiert die Schlüsselwortwerte dotted, solid, oder space (entspricht leader("."), leader("_"), und leader(" "), beziehungsweise), oder eine <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 den Inhalt visuell ü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 eines Pseudo-Elements ab. Der Wert des Attributs x des Elements ist ein nicht geparster String, der den Attributnamen darstellt. Wenn es kein Attribut x gibt, wird ein leerer String zurückgegeben. Die Groß- und Kleinschreibung des Attributnamenparameters hängt von der Dokumentsprache ab.

Alternativer Text: / <string> | <counter> | attr()

Ein alternativer Text kann für ein Bild oder beliebige <content-list> Elemente angegeben werden, indem ein Schrägstrich und dann eine Kombination aus Zeichenfolgen, Zählern und attr() Funktionen angehängt werden. Der alternative Text ist für die Ausgabe durch einen Screenreader 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>                                     

<attr-unit> = 
  <custom-ident>  

<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 generierte Inhalte sind nicht im DOM enthalten. Aufgrund dessen sind sie im Zugänglichkeitssbaum nicht vertreten und gewisse Kombinationen aus assistiver Technologie und Browser geben sie nicht wieder. Wenn der Inhalt Informationen enthält, die entscheidend für das Verständnis des Zwecks der Seite sind, ist es besser, ihn im Hauptdokument einzufügen.

Wenn eingefügter Inhalt nicht dekorativ ist, stellen Sie sicher, dass die Informationen assistiven Technologien zur Verfügung steht und auch verfügbar ist, wenn CSS ausgeschaltet ist.

• Barrierefreie Unterstützung für mit CSS generierte Inhalte – Tink (2015)
• WCAG, Leitfaden 1.3: Erstellen Sie Inhalte, die in verschiedenen Weisen präsentiert werden können
• Verständnis von Erfolgskriterium 1.3.1 | W3C Understanding WCAG 2.0
• Fehler beim Erfolgskriterium 1.3.1: Einfügen von nicht-dekorativen generierten Inhalten 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 Elementersetzung.

Anfügen von Zeichenfolgen basierend auf der Klasse eines Elements

Dieses Beispiel fügt nach dem Text von Elementen, die einen bestimmten Klassennamen haben, generierten Text ein. 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 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 die Art der generierten Anführungszeichen basierend auf der Sprache erfolgt. Browser fügen standardmäßig öffnende und schließende Anführungszeichen vor und nach <q> Elementen hinzu, daher würden die Anführungszeichen in diesem Beispiel ohne explizite Angabe erscheinen. Sie könnten ausgeschaltet werden, indem die jeweiligen content-Eigenschaftswerte auf no-open-quote und no-close-quote gesetzt werden, oder indem sie beide auf none gesetzt werden. Sie können auch ausgeschaltet werden, indem die quotes Eigenschaft auf none eingestellt wird.

Hinzufügen von Text zu Listeneinträgezählern

Dieses Beispiel kombiniert einen Zähler, der zwischen zwei <string>s eingesetzt wird, die allen Listeneinträgen vorangestellt werden, und erstellt so detailliertere Markierungen für Listeneinträge (<li>) in ungeordneten 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 dem Text "item " als Präfix hinzu, einschließlich eines Leerzeichens, um das Präfix vom Zähler zu trennen, das gefolgt wird von ": ", einem Doppelpunkt und einem weiteren Leerzeichen. Die counters() Funktion definiert einen numerischen items Zähler, in dem die Zahlen von untergeordneten geordneten Listen in den meisten Browsern mit einem Punkt (.) getrennt sind.

Zeichenfolgen mit Attributwerten

Dieses Beispiel ist nützlich für Druckstile. 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="https://developer.mozilla.org/">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.

Einfü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 zu setzen, wird unten gezeigt. Außerdem werden 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 Screenreader verwenden, sollte er das Wort "MOZILLA" sprechen, wenn er das Bild erreicht. Sie können das ::before Pseudo-Element mit Ihrem Auswahlinstrument der Entwickler-Tools auswählen und den barrierefreien Namen im Barrierefreiheits-Panel anzeigen.

Einschließen von Zählern in alternativem Text

Dieses Beispiel zeigt eine Liste von Links zu einem Set von Buchkapiteln und zeigt, wie man generierten Inhalt verwenden kann, um ein Buchsymbol und einen Zähler vor jedem hinzuzufügen, mit alternativem Text, der das wörtliche Wort "Chapter" anstelle des Symbols enthält. Dies resultiert darin, dass das Wort "Kapitel" und die Kapitelnummer dem Text in jedem Link als barrierefreier Name vorangestellt werden, was den Screenreader-Benutzern mitgeteilt wird, wenn der Link den Fokus erhält.

HTML

Wir fügen eine Überschrift gefolgt von einer geordneten Liste von Kapitel-Titel-Links unter Verwendung von <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

Der CSS-Code enthält ein counter-reset für den chapter Zähler auf dem <ol> Element. Wir inkrementieren außerdem den chapter Zähler auf jedem <li> Element mit counter-increment und entfernen die Listenmarkierungen, indem wir einen list-style-type Wert von none setzen.

ol {
  counter-reset: chapter;
}

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

Anschließend setzen wir das ::before Pseudo-Element der <a> Elemente so, dass es generierten content enthält, der gleich einem Buch-Emoji ist, um ein Kapitel darzustellen, plus den aktuellen chapter Zählerwert und ein Leerzeichen, so dass der generierte Inhalt vom Linktext getrennt ist. Schließlich setzen wir den alternativen Text des generierten Inhalts auf den aktuellen chapter Zählerwert, dem das Wort "Kapitel" vorangestellt ist.

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

Ergebnis

Wenn ein Screenreader zu einem Link innerhalb der Liste navigiert, werden unterstützende Browser "Kapitel" gefolgt von der aktuellen Zählernummer, gefolgt vom Linktext ansagen, zum Beispiel "Kapitel 1 Ein Fremder ruft an" und "Kapitel 2 Zwei Eulen".

Elementersetzung mit URL

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

Pseudo-Elemente werden auf ersetzten Elementen nicht gerendert. Da dieses Element ersetzt wird, werden keine übereinstimmenden ::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 Pseudo-Element wird nicht generiert, da das Element ersetzt wird.

HTML

<div id="replaced">This content is replaced!</div>

CSS

#replaced {
  content: url("https://developer.mozilla.org/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 Pseudo-Elementen) wird das gesamte Element ersetzt. Dies bedeutet, dass ::before und ::after Pseudo-Elemente nicht generiert werden.

Elementersetzung mit <gradient>

Dieses Beispiel demonstriert, wie der Inhalt eines Elements durch einen beliebigen <image> Typ ersetzt werden kann, in diesem Fall ein CSS-Gradient. Der Inhalt des Elements wird durch ein linear-gradient() ersetzt. Wir stellen alternativen Text bereit, 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 Verläufe und alle Browser unterstützen das Ersetzen von Elementen durch Bilder, aber nicht alle Browser unterstützen Verläufe als content Wert.

Elementersetzung 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.

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