content
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
Die content
CSS Eigenschaft ersetzt Inhalte durch einen generierten Wert. Sie kann verwendet werden, um zu definieren, was in einem Element oder Pseudo-Element gerendert wird. Für Elemente gibt die content
-Eigenschaft an, ob das Element normal gerendert wird (normal
oder none
) oder durch ein Bild (und zugehörigen "alt"-Text) ersetzt wird. Für Pseudo-Elemente und Randkästen 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 werden, sind anonyme Replaced Elements.
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
odernormal
.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 Randkästen 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 (/
) vorausgeht.
Die oben genannten Schlüsselwörter und Datentypen werden unten genauer beschrieben:
none
-
Wenn auf ein Pseudo-Element angewendet, wird das Pseudo-Element nicht erzeugt. Bei Anwendung auf ein Element hat der Wert keine Wirkung.
normal
-
Für die
::before
und::after
Pseudo-Elemente wertet sich dieser Wert aufnone
aus. Für andere Pseudo-Elemente wie::marker
,::placeholder
oder::file-selector-button
, wird der ursprüngliche (oder normale) Inhalt des Elements erzeugt. Für reguläre Elemente oder Seitenrandkiefern wertet es sich auf die Nachkommen des Elements aus. Dies ist der Standardwert. <string>
-
Eine Zeichenfolge, die in passenden einfachen oder doppelten Anführungszeichen eingeschlossen ist. Mehrere Zeichenfolgen werden miteinander verkettet (es gibt keinen Verkettungsoperator in CSS).
<image>
-
Ein
<image>
`, das ein darzustellendes Bild repräsentiert. Dies kann einem<url>
,image-set()
oder<gradient>
Datentyp entsprechen oder einem Teil der Webseite, definiert durch dieelement()
Funktion. <counter>
-
Der
<counter>
-Wert ist ein CSS-Zähler, in der Regel eine Zahl, die durch Berechnungen definiert wird, die von den<counter-reset>
und<counter-increment>
Eigenschaften bereitgestellt werden. Es kann mit entweder dercounter()
odercounters()
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>
formatiert (decimal
standardmäßig). 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 Geltungsbereich des angegebenen Pseudo-Elements, von außen nach innen, getrennt durch den angegebenen String. Die Zähler werden im angegebenen<list-style-type>
formatiert (decimal
standardmäßig).
<quote>
-
Der
<quote>
Datentyp umfasst sprach- und positionsabhängige Schlüsselwörter:open-quote
undclose-quote
-
Diese Werte werden durch den entsprechenden String der
quotes
Eigenschaft ersetzt. no-open-quote
undno-close-quote
-
Fügt keinen Inhalt ein, erhöht (verringert) aber die Verschachtelungsebene für Anführungszeichen.
<target>
-
Der
<target>
Datentyp umfasst drei Ziel-Funktionen,<target-counter()>
,<target-counters()>
, und<target-text()>
, die Querverweise erstellen, die vom Zielende eines Links erhalten werden. Siehe Formale Syntax. <leader()>
-
Der
<leader()>
Datentyp umfasst eine Leader-Funktion:leader( <leader-type> )
. Diese Funktion akzeptiert die Schlüsselwortwertedotted
,solid
oderspace
(entsprichtleader(".")
,leader("_")
, undleader(" ")
), oder einen<string>
als Parameter. Wenn unterstützt und als Wert fürcontent
verwendet, wird der angegebene Leader-Typ als 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 Ursprünglichen Elements des Pseudo-Elements ab. Der Wert des Attributsx
des Elements ist ein nicht analysierter String, der den Attributnamen darstellt. Wenn kein Attributx
existiert, wird ein leerer String zurückgegeben. Die Groß-/Kleinschreibung des Attributnamen-Parameters hängt von der Dokumentsprache 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 Sprachausgabe durch Bildschirmleser bestimmt, kann aber auch in einigen Browsern angezeigt werden. Die Daten-Typen/ <string>
oder/ <counter>
spezifizieren den "alt-Text" für das Element.
Formale Definition
Anfangswert | normal |
---|---|
Anwendbar auf | All elements, tree-abiding pseudo-elements, and page margin boxes |
Vererbt | Nein |
Berechneter Wert | Bei Elementen ist der berechnete Wert immer normal . Falls bei ::before und ::after normal angegeben ist, ist der berechnete Wert none . Ansonsten, für URI Werte die absolute URI; für attr() Werte der resultierende String; für andere Schlüsselwörter wie angegeben. |
Animationstyp | diskret |
Formale Syntax
content =
normal |
none |
[ <content-replacement> | <content-list> ] [ / [ <string> | <counter> | <attr()> ]+ ]? |
<element()>
<content-replacement> =
<image>
<content-list> =
[ <string> | <counter()> | <counters()> | <content()> | <attr()> ]+
<counter> =
<counter()> |
<counters()>
<attr()> =
attr( <attr-name> <attr-type>? , <declaration-value>? )
<element()> =
element( <id-selector> )
<image> =
<url> |
<gradient>
<counter()> =
counter( <counter-name> , <counter-style>? )
<counters()> =
counters( <counter-name> , <string> , <counter-style>? )
<content()> =
content( [ text | before | after | first-letter | marker ]? )
<attr-name> =
[ <ident-token>? '|' ]? <ident-token>
<attr-type> =
type( <syntax> ) |
raw-string |
<attr-unit>
<id-selector> =
<hash-token>
<url> =
<url()> |
<src()>
<counter-style> =
<counter-style-name> |
<symbols()>
<syntax> =
'*' |
<syntax-component> [ <syntax-combinator> <syntax-component> ]* |
<syntax-string>
<url()> =
url( <string> <url-modifier>* ) |
<url-token>
<src()> =
src( <string> <url-modifier>* )
<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 Kombinationen aus unterstützender Technologie und Browsern werden ihn nicht ankündigen. Wenn der Inhalt Informationen vermittelt, die entscheidend für das Verständnis der Seite sind, ist es besser, ihn im Hauptdokument zu platzieren.
Wenn eingefügter Inhalt nicht dekorativ ist, überprüfen Sie, ob die Informationen unterstützenden Technologien bereitgestellt werden und auch verfügbar sind, wenn CSS deaktiviert ist.
- Unterstützung der Barrierefreiheit für CSS generierten Inhalt – Tink (2015)
- WCAG, Richtlinie 1.3: Erstellen Sie Inhalte, die auf verschiedene Weisen präsentiert werden können
- Erfolgskriterium 1.3.1 verstehen | W3C Understanding WCAG 2.0
- Fehlendes Erfolgskriterium 1.3.1: Einfügen nicht dekorativer generierter Inhalte Techniken für WCAG 2.0
Beispiele
Die ersten fünf Beispiele erzeugen Inhalt auf Pseudo-Elementen. Die letzten drei sind Beispiele für Elementersetzung.
Anhängen 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
Anführungszeichen
Dieses Beispiel fügt anders 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: #00f;
}
q::before,
q::after {
font-size: larger;
color: #f00;
background: #ccc;
}
q::before {
content: open-quote;
}
q::after {
content: close-quote;
}
Ergebnis
Beachten Sie, dass der Typ der erzeugten 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 erscheinen würden, ohne dass sie explizit festgelegt sind. Sie könnten durch Festlegen der jeweiligen content
-Eigenschaftswerte auf no-open-quote
und no-close-quote
oder auf none
ausgeschaltet 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 zwischen zwei <string>
s eingefügt wird, die allen Listeneinträgen vorangestellt sind, um eine detailliertere Markierung für Listeneinträge (<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 jeder Markierung des Listenelements fügt dem Text "item " einen Präfix hinzu, einschließlich eines Leerzeichens, um das Präfix vom Zähler zu trennen, der von ": ", einem Doppelpunkt und einem weiteren Leerzeichen gefolgt wird. Die counters()
Funktion definiert einen numerischen items
Zähler, wobei die Zahlen der geschachtelten geordneten Listen in den meisten Browsern durch einen Punkt (.) getrennt werden.
Strings mit Attributwerten
Dieses Beispiel ist nützlich für Druckformatvorlagen. Es verwendet einen Attribut-Selektor, um jeden vollständig qualifizierten sicheren Link auszuwählen und den Wert des href
-Attributs nach dem Link-Text als Inhalt des ::after
Pseudo-Elements hinzuzufügen.
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: " vorausgeht, mit einem Leerzeichen, alles in Klammern.
Hinzufügen eines Bildes mit alternativem Text
Dieses Beispiel fügt vor allen Links ein Bild 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-Code, um das Bild anzuzeigen und den alternativen Text festzulegen, wird unten gezeigt. Dazu werden auch der Schriftstil und die Farbe für den Inhalt festgelegt.
a::before {
content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") /
" MOZILLA: ";
}
Ergebnis
Hinweis: Der alternative Textwert wird im Barrierefreiheitsbaum des Browsers angezeigt. Bitte sehen Sie im Abschnitt Siehe auch nach browser-spezifischen Barrierefreiheits-Panels.
Wenn Sie einen Bildschirmleser verwenden, sollte er das Wort "MOZILLA" aussprechen, wenn er das Bild erreicht. Sie können das ::before
Pseudo-Element mit Ihrem Entwicklertools-Auswahlwerkzeug auswählen und den barrierefreien Namen im Barrierefreiheits-Panel ansehen.
Elementersetzung mit URL
Dieses Beispiel ersetzt ein reguläres Element! Der Inhalt des Elements wird durch eine SVG ersetzt, die den <url>
-Typ verwendet.
Pseudo-Elemente werden auf ersetzten Elementen nicht gerendert. Da dieses Element ersetzt wird, werden keine übereinstimmenden ::after
oder ::before
erzeugt oder angewendet. Um dies zu demonstrieren, fügen wir einen ::after
Deklarationsblock hinzu, 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 Erzeugen von Inhalt auf regulären Elementen (anstatt nur auf Pseudo-Elementen) wird das gesamte Element ersetzt. Das bedeutet, dass ::before
und ::after
Pseudo-Elemente nicht erzeugt werden.
Elementersetzung mit <gradient>
Dieses Beispiel zeigt, wie der Inhalt eines Elements durch einen beliebigen <image>
-Typ ersetzt werden kann, in diesem Fall einem CSS-Gradient. Der Inhalt des Elements wird durch einen linear-gradient()
ersetzt. Wir stellen alternativen Text bereit, da alle Bilder für die Barrierefreiheit beschrieben werden sollten.
HTML
<div id="replaced">I disappear</div>
CSS
div {
border: 1px solid;
background-color: #ccc;
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 Gradientes und alle Browser unterstützen das Ersetzen von Elementen mit Bildern, aber nicht alle Browser unterstützen Gradientes als content
-Wert.
Elementersetzung mit image-set()
Dieses Beispiel ersetzt den Inhalt eines Elements mit einem image-set()
. Wenn das Display des Nutzers 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
#replaced {
content: image-set(
"1x.png" 1x,
"2x.png" 2x
) / "DPI";
}
Ergebnis
Spezifikationen
Specification |
---|
CSS Generated Content Module Level 3 # content-property |
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-Barrierefreiheits-Panels: Firefox Accessibility inspector, Chrome Accessibility pane, und Safari Accessibility tree