content

Die content CSS-Eigenschaft ersetzt den Inhalt mit einem generierten Wert. Sie kann verwendet werden, um festzulegen, was innerhalb eines Elements oder Pseudo-Elements gerendert wird. Für Elemente legt die content-Eigenschaft fest, ob das Element normal (normal oder none) gerendert wird oder durch ein Bild (und den zugehörigen „alt"-Text) ersetzt wird. Für Pseudo-Elemente und Randboxen definiert content den Inhalt als Bilder, Text, beides oder nichts, was bestimmt, ob das Element überhaupt gerendert wird.

Objekte, die mit der content-Eigenschaft eingefügt wurden, sind anonyme ersetzte Elemente .

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>.
• Eine <content-list>, wenn Pseudo-Elemente und Randboxen ersetzt werden. Eine <content-list> ist eine Liste aus 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 einer <string> oder <counter>, vorangestellt von einem Schrägstrich (/).

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

none

Wenn auf ein Pseudo-Element angewendet, wird das Pseudo-Element nicht generiert. Bei Anwendung auf ein Element hat der Wert keine Auswirkungen.

normal

Für die ::before und ::after Pseudo-Elemente berechnet sich dieser Wert zu none. 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 Seitenrandboxen berechnet es sich zu den Nachfahren des Elements. Dies ist der Standardwert.

<string>

Eine Zeichenfolge, eingeschlossen in passende einfache oder doppelte Anführungszeichen. Mehrere Zeichenfolgenwerte werden zusammengefügt (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 ein Teil der Webseite selbst sein, definiert durch die element()-Funktion.

<counter>

Der <counter>-Wert ist ein CSS-Zähler, im Allgemeinen eine Zahl, 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 mit dem gegebenen Namen im Bereich des gegebenen Pseudo-Elements. 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 Bereich des gegebenen Pseudo-Elements, von außen nach innen, getrennt durch die angegebene Zeichenfolge. 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 die entsprechende Zeichenfolge aus der quotes-Eigenschaft ersetzt.

no-open-quote und no-close-quote

Fügt keinen Inhalt ein, aber erhöht (verringert) die Verschachtelungsebene für Anführungszeichen.

<target>

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

<leader()>

Der <leader()>-Datentyp umfasst eine Leader-Funktion: leader( <leader-type> ). Diese Funktion akzeptiert die Schlüsselwortwerte dotted, solid oder space (gleichwertig mit leader("."), leader("_") und leader(" "), jeweils), 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 Inhalt ü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 Pseudo-Elements ab. Der Wert des Attributs x des Elements ist eine unverarbeitete Zeichenfolge, die den Attributnamen darstellt. Wenn kein Attribut x vorhanden ist, wird eine leere Zeichenfolge zurückgegeben. Die Groß-/Kleinschreibungsempfindlichkeit des Attributnamensparameters hängt von der Dokumentensprache ab.

Alternativer Text: / <string> | <counter>

Alternativer Text kann für ein Bild oder beliebige <content-list>-Elemente angegeben werden, indem ein Schrägstrich gefolgt von einem Textstring oder einem Zähler hinzugefügt wird. Der alternative Text ist für die Sprachausgabe durch Screenreader vorgesehen, 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

CSS-generierter Inhalt ist nicht im DOM enthalten. Daher wird er nicht im Barrierefreiheitsbaum dargestellt und bestimmte Kombinationen aus unterstützenden Technologien und Browsern werden ihn nicht ankündigen. Wenn der Inhalt Informationen vermittelt, die für das Verständnis des Zwecks der Seite entscheidend sind, ist es besser, ihn im Hauptdokument einzuschließen.

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

• Accessibility support for CSS generated content – Tink (2015)
• WCAG, Leitlinie 1.3: Erstellen von Inhalten, die auf verschiedene 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 das Ersetzen von Elementen.

Anhängen von Zeichenfolgen basierend auf einer Klassenname 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 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 der Typ der generierten Anführungszeichen auf der Sprache basiert. Browser fügen standardmäßig öffnende und schließende Anführungszeichen vor und nach den <q>-Elementen ein, sodass die Anführungszeichen in diesem Beispiel ohne explizite Angabe erscheinen würden. Sie könnten ausgeschaltet werden, indem die entsprechenden content-Eigenschaftswerte auf no-open-quote und no-close-quote gesetzt werden oder indem beide auf none gesetzt werden. Sie können auch ausgeschaltet werden, indem die quotes-Eigenschaft auf none gesetzt wird.

Hinzufügen von Text zu Listenpunkte-Zählern

Dieses Beispiel kombiniert einen Zähler zwischen zwei <string>-Namen, die allen Listeneinträgen (<li>) in ungeordneten Listen (<ol>) eine detailliertere Markierung voranstellen.

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 für das Markierungszeichen jedes Listenelements fügt den Text "item " als Präfix hinzu und enthält ein Leerzeichen, um das Präfix vom Zähler zu trennen, gefolgt von ": ", einem Doppelpunkt und einem zusätzlichen Leerzeichen. Die counters()-Funktion definiert einen numerischen items-Zähler, bei dem die Nummern von 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 Attribute Selector, um jeden vollständig qualifizierten sicheren Link auszuwählen. Der Wert des href-Attributs wird nach dem Linktext als Inhalt des ::after-Pseudo-Elements hinzugefügt.

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 und in Klammern eingeschlossen.

Hinzufügen eines Bildes mit alternativem Text

Dieses Beispiel fügt ein Bild vor allen Links ein. Es werden zwei content-Werte bereitgestellt. Der spätere content-Wert umfasst ein Bild mit einem alternativen 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 legt auch die Schrift und Farbe für den Inhalt fest.

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 dem Auswahltool Ihrer Entwicklerwerkzeuge auswählen und den zugänglichen Namen im Barrierefreiheits-Panel ansehen.

Ersetzen von Elementen mit URL

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

Pseudo-Elemente werden bei ersetzten Elementen nicht gerendert. Da dieses Element ersetzt wird, werden alle passenden ::after oder ::before-Elemente nicht generiert oder angewendet. Zum Demonstrieren dieses Effekts schließen 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("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 von Elementen mit <gradient>

Dieses Beispiel zeigt, wie Inhalte eines Elements durch einen beliebigen Typ von <image> ersetzt werden können, in diesem Fall ein CSS-Verlauf. Die Inhalte des Elements werden durch einen linear-gradient() ersetzt. Wir bieten 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ä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 von Elementen 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-generierter Inhalt Modul
• CSS-Listen und Zähler Modul
• Barrierefreiheits-Panels der Browser: Firefox Barrierefreiheitsinspektor, Chrome Barrierefreiheitspaneel und Safari Barrierefreiheitsbaum