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 folgendermaßen 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 Margin-Boxen 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 (/) vorangeht.

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

none

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

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 Seitenrand-Boxen wird zu den Nachkommen des Elements berechnet. Dies ist der Standardwert.

<string>

Eine Zeichenfolge, die in passenden einfachen oder doppelten Anführungszeichen eingeschlossen ist. Mehrere Zeichenfolgenwerte werden zusammengefügt (es gibt keinen Verknüpfungsoperator in CSS).

<image>

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

<counter>

Der <counter>-Wert ist ein CSS-Zähler, in der Regel eine Zahl, die durch Berechnungen der Eigenschaften <counter-reset> und <counter-increment> produziert wird. Sie kann entweder über die Funktion counter() oder counters() angezeigt werden.

counter()

Die Funktion counter() hat zwei Formen: 'counter(name)' oder 'counter(name, style)'. Der generierte Text ist der Wert des innersten Zählers mit dem angegebenen Namen im Bereich des bestimmten Pseudo-Elements. Er wird im spezifizierten <list-style-type> (standardmäßig decimal) formatiert.

counters()

Die Funktion counters() 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 Pseudo-Elements, von außen nach innen, getrennt durch den angegebenen String. Die Zähler werden in dem angegebenen <list-style-type> gerendert (standardmäßig decimal).

<quote>

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

open-quote und close-quote

Diese Werte werden durch den entsprechenden String der Eigenschaft quotes 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 beinhaltet drei Ziel-Funktionen, <target-counter()>, <target-counters()> und <target-text()>, die Querverweise erzeugen, die vom Zielende eines Links erhalten werden. Siehe Formal syntax.

<leader()>

Der <leader()>-Datentyp beinhaltet eine Leader-Funktion: leader( <leader-type> ). Diese Funktion akzeptiert die Schlüsselwortwerte dotted, solid oder space (gleichbedeutend mit leader("."), leader("_") und leader(" "), bzw.) oder einen <string> als Parameter. Wenn unterstützt und als Wert für content verwendet, wird der bereitgestellte Leader-Typ als wiederholtes 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 Pseudo-Elements ab. Der Wert des Attributs x des Elements ist eine unverarbeitete Zeichenfolge, die den Attributnamen darstellt. Wenn es kein Attribut x gibt, wird eine leere Zeichenfolge zurückgegeben. Die Groß-/Kleinschreibung des Attributnamens hängt von der Dokumentensprache ab.

Alternativtext: / <string> | <counter>

Alternativer Text kann für ein Bild oder alle <content-list> Elemente angegeben werden, indem ein Schrägstrich und dann ein Textstring oder ein Zähler angefügt wird. Der Alternativtext ist für die Sprachausgabe durch Bildschirmlesegeräte vorgesehen, kann jedoch auch in einigen Browsern angezeigt werden. Die Datentypen / <string> oder / <counter> 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

In CSS generierte Inhalte sind nicht im DOM enthalten. Daher werden sie nicht im Barrierefreiheitsbaum dargestellt und bestimmte Hilfstechnologie-/Browserkombinationen werden sie nicht ankündigen. Wenn der Inhalt Informationen vermittelt, die zum Verständnis des Zwecks der Seite entscheidend sind, ist es besser, ihn im Hauptdokument zu integrieren.

Wenn der eingefügte Inhalt nicht dekorativ ist, stellen Sie sicher, dass die Informationen Hilfstechnologien zur Verfügung gestellt werden und auch verfügbar sind, wenn CSS ausgeschaltet ist.

• Unterstützung der Barrierefreiheit für von CSS generierte Inhalte – Tink (2015)
• WCAG, Leitfaden 1.3: Erstellen von Inhalten, die auf verschiedene Weisen präsentiert werden können
• Erklärung von Erfolgskriterium 1.3.1 | W3C Understanding WCAG 2.0
• Versäumnis des Erfolgskriteriums 1.3.1: Einfügen von nicht dekorativen generierten Inhalten Techniken für WCAG 2.0

Beispiele

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

Anhängen von Zeichenfolgen basierend auf einer Klassenbezeichnung des 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 farbige 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 öffnende und schließende Anführungszeichen vor und nach <q>-Elementen hinzu, sodass die Anführungszeichen in diesem Beispiel ohne explizite Einstellung erscheinen. Sie hätten durch Setzen der entsprechenden content-Eigenschaftenwerte auf no-open-quote und no-close-quote oder durch Setzen auf none ausgeschaltet werden können. Sie können auch ausgeschaltet werden, indem die Eigenschaft quotes auf none gesetzt wird.

Hinzufügen von Text zu Listenelement-Zählern

Dieses Beispiel kombiniert einen Zähler, der von zwei <string>s umschlossen ist und allen Listenelementen vorangestellt wird, um einen detaillierteren Marker für Listenelemente (<li>) innerhalb ungeordneter 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 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 Funktion counters() definiert einen numerischen items-Zähler, in dem die Zahlen verschachtelter geordneter Listen in den meisten Browsern mit einem Punkt (.) getrennt sind.

Zeichenfolgen mit Attributwerten

Dieses Beispiel ist nützlich für Druckstile. 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 Pseudo-Elements 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 durch "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 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 zur Anzeige des Bildes und zum Setzen des Alternativtextes wird unten gezeigt. Es 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" sprechen, wenn er das Bild erreicht. Sie können das ::before Pseudo-Element mit Ihrem Entwicklertools-Auswahlwerkzeug auswählen und den zugänglichen Namen im Barrierefreiheitspanel anzeigen.

Ersetzen eines Elements mit URL

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

Pseudo-Elemente werden bei ersetzten Elementen nicht gerendert. Da dieses Element ersetzt wird, werden alle übereinstimmenden ::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. Dieser 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 auf regulären Elementen (anstatt nur auf 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 ein Elementinhalt durch einen beliebigen Typ von <image>, hier ein CSS-Gradient, ersetzt werden kann. Der Inhalt des Elements wird mit einem linear-gradient() ersetzt. Wir stellen alternativen Text bereit, da 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 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 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
• CSS generierte Inhalte Modul
• CSS Listen und Zähler Modul
• Barrierefreiheitspanels der Browser: Firefox Accessibility Inspector, Chrome Accessibility Pane, und Safari Accessibility Tree