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 den Inhalt durch einen generierten Wert. Sie kann verwendet werden, um zu definieren, was innerhalb eines Elements oder eines Pseudo-Elements gerendert wird. Für Elemente gibt die content
-Eigenschaft an, 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 mithilfe der content
-Eigenschaft eingefügt werden, sind anonyme ersetzte Elemente.
Probieren Sie es aus
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 der beiden Schlüsselwörter —
none
odernormal
. <content-replacement>
beim Ersetzen eines DOM-Knotens.<content-replacement>
ist immer ein<image>
.- Ein
<content-list>
, wenn Pseudo-Elemente und Randboxen 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 ein Typ von<string>
,<image>
,<counter>
,<quote>
,<target>
oder<leader()>
. - Ein optionaler alternativer Textwert eines
<string>
oder<counter>
vorangestellt durch einen Schrägstrich (/
).
Die oben erwähnten Schlüsselwörter und Datentypen werden unten genauer beschrieben:
none
-
Wenn auf ein Pseudo-Element angewendet, wird das Pseudo-Element nicht generiert. Wenn auf ein Element angewendet, hat der Wert keine Wirkung.
normal
-
Der Standardwert. Der Wert wird für die
::before
- und::after
-Pseudo-Elemente zunone
berechnet. Für andere Pseudo-Elemente ist der Inhalt der initiale (oder normale) Inhalt, der für diese::marker
,::placeholder
oder::file-selector-button
erwartet wird. Für reguläre Elemente oder Seitenrandboxen wird der Inhalt auf die Nachkommen des Elements berechnet. <string>
-
Eine Zeichenkette, die in passende einfache oder doppelte Anführungszeichen eingeschlossen ist. Mehrere Zeichenkettenwerte werden verkettet (es gibt keinen Verkettungsoperator in CSS).
<image>
-
Ein
<image>
, welches ein anzuzeigendes Bild darstellt. Dies kann einem<url>
,image-set()
oder<gradient>
-Datentyp entsprechen oder einem Teil der Webseite selbst, definiert durch die Funktionelement()
. <counter>
-
Der
<counter>
-Wert ist ein CSS-Zähler, üblicherweise eine Zahl, die durch Berechnungen definiert wird, die in den Eigenschaften<counter-reset>
und<counter-increment>
festgelegt sind. Er kann entweder mit dercounter()
- odercounters()
-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 des gegebenen Namens, der im angegebenen Pseudo-Element im Bereich liegt. Er wird im angegebenen<list-style-type>
-Format angezeigt (standardmäßigdecimal
). 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 beim angegebenen Pseudo-Element, von äußerstem bis innerstem Zähler, getrennt durch die angegebene Zeichenkette. Die Zähler werden im angegebenen<list-style-type>
-Format dargestellt (standardmäßigdecimal
).
<quote>
-
Der
<quote>
-Datentyp enthält sprach- und positionsabhängige Schlüsselwörter:open-quote
undclose-quote
-
Diese Werte werden durch die entsprechenden Zeichenkette aus der
quotes
-Eigenschaft ersetzt. no-open-quote
undno-close-quote
-
Fügt keinen Inhalt ein, erhöht aber (verringert) die Schachtelungsebene für Anführungszeichen.
<target>
-
Der
<target>
-Datentyp umfasst drei Ziel-Funktionen:<target-counter()>
,<target-counters()>
und<target-text()>
, die Querverweise erzeugen, die vom Ziel eines Links erhalten wurden. Siehe Formale Syntax. <leader()>
-
Der
<leader()>
-Datentyp enthält eine Leader-Funktion:leader( <leader-type> )
. Diese Funktion akzeptiert die Schlüsselwortwertedotted
,solid
oderspace
(entsprichtleader(".")
,leader("_")
undleader(" ")
), oder eine<string>
als Parameter. Wenn unterstützt und als Wert fürcontent
verwendet, wird der angegebene Leader-Typ als wiederholtes Muster eingefügt, das visuell Inhalt ü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 Attributelementsx
ist eine nicht geparste Zeichenkette, die den Attributnamen darstellt. Wenn kein Attributx
vorhanden ist, wird eine leere Zeichenkette zurückgegeben. Die Groß- und Kleinschreibung des Attributnamenparameters hängt von der Dokumentsprache ab. - Alternative Texte:
/ <string> | <counter>
-
Alternative Texte können für ein Bild oder beliebige
<content-list>
-Elemente angegeben werden, indem ein Schrägstrich und eine Zeichenkette oder ein Zähler angefügt werden. Der alternative Text ist für die Sprachausgabe durch Screenreader vorgesehen, kann aber auch in einigen Browsern angezeigt werden. Wenn der Browser alternative Texte nicht unterstützt, wird diecontent
-Deklaration als ungültig betrachtet und ignoriert. Die/ <string>
oder/ <counter>
-Datentypen geben den "Alt-Text" für das Element an.
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> ) |
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
CSS-generierter Inhalt wird nicht im DOM enthalten. Aufgrund dessen wird er nicht im Barrierefreiheitsbaum dargestellt, und bestimmte Kombinationen aus unterstützender Technologie und Browser werden ihn nicht ankündigen. Wenn der Inhalt wichtige Informationen enthält, die zum Verständnis der Seite erforderlich sind, sollte er besser im Hauptdokument enthalten sein.
Wenn der eingefügte Inhalt nicht dekorativ ist, überprüfen Sie, ob die Informationen unterstützenden Technologien bereitgestellt werden und auch verfügbar sind, wenn CSS deaktiviert ist.
- Barrierefreiheit von CSS-generiertem Inhalt – Tink (2015)
- WCAG, Richtlinie 1.3: Erstellen Sie Inhalte, die auf verschiedene Arten präsentiert werden können
- Verständnis von Erfolgskriterium 1.3.1 | W3C Understanding WCAG 2.0
- Fehler von Erfolgskriterium 1.3.1: Einfügen von nicht dekorativem generiertem Inhalt Techniken für WCAG 2.0
Beispiele
Die ersten fünf Beispiele erstellen generierten Inhalt bei Pseudo-Elementen. Die letzten drei Beispiele zeigen Beispiele für Elementersetzungen.
Anfügen von Zeichenketten 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 wird in rot dargestellt.
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: #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 die Art der generierten Anführungszeichen auf der Sprache basiert. Browser fügen standardmäßig öffnende und schließende Anführungszeichen vor und nach <q>
-Elementen ein, somit würden die Anführungszeichen in diesem Beispiel auch erscheinen, ohne dass sie explizit gesetzt werden. Sie hätten durch Festlegen der jeweiligen content
-Eigenschaftswerte auf no-open-quote
und no-close-quote
oder durch Festlegen beider auf none
ausgeschaltet werden können. Sie können auch ausgeschaltet werden, indem die quotes
-Eigenschaft auf none
gesetzt wird.
Hinzufügen von Text zu Listenelementzählmarken
Dieses Beispiel kombiniert einen Zähler, der zwischen zwei <string>
s eingefügt wird und allen Listenelementen vorangestellt wird, um eine detailliertere Markierung für Listenelemente (<li>
) innerhalb unsortierter 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>Marsupials</li>
</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 am 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 counters()
-Funktion definiert einen numerischen items
-Zähler, bei dem die Zahlen verschachtelter geordneter Listen in den meisten Browsern mit einem Punkt (.
) getrennt sind.
Zeichenketten mit Attributwerten
Dieses Beispiel ist nützlich für Druckstile. Es verwendet einen Attributselektor, um jeden vollständig qualifizierten sicheren Link auszuwählen, und fügt den Wert des href
-Attributs nach dem Linktext als den 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, dem "URL: ", gefolgt von einem Leerzeichen, alles in Klammern, vorangestellt ist.
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, der von einem Screenreader als Sprache ausgegeben werden kann. Wenn ein Browser keinen alternativen Text unterstützt, wird diese Deklaration als ungültig betrachtet, wobei der vorherige content
-Wert angezeigt wird. Diese Fallback-Content-Liste enthält ein Bild und die Nachricht " - alt text is not supported - ".
HTML
<a href="https://www.mozilla.org/en-US/">Mozilla Home Page</a>
CSS
Die CSS, um das Bild anzuzeigen und den alternativen Text festzulegen, wird unten gezeigt. Es legt auch die Schriftart und Farbe für den Inhalt fest. Dies wird in Browsern verwendet, die den alternativen Text anzeigen und auch in Browsern, die den alternativen Text nicht unterstützen und den Fallback-content
-Wert anzeigen.
a::before {
/* fallback content */
content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico")
" - alt text is not supported - ";
/* content with alternative text */
content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") /
" MOZILLA: ";
font:
x-small Arial,
sans-serif;
color: gray;
}
Ergebnis
Hinweis: Wenn die alternative Textsyntax unterstützt wird, wird der Wert im Barrierefreiheitsbaum des Browsers angezeigt. Weitere Informationen finden Sie im Abschnitt Siehe auch für browserspezifische Barrierefreiheitsoberflächen.
Wenn ein Screenreader verwendet wird, sollte das Wort "MOZILLA" gesprochen werden, wenn es das Bild erreicht. Falls unterstützt (wenn "alt text is not supported" nicht angezeigt wird), können Sie das ::before
-Pseudo-Element mit Ihrem Entwicklertoolsselektor auswählen und den barrierefreien Namen im Barrierefreiheitsbereich anzeigen.
In Browsern, die die alternative Textsyntax nicht unterstützen, ist die gesamte Deklaration mit dem Alt-Text ungültig. In diesem Fall wird der vorherige content
-Wert verwendet, bei dem das Bild und der Text "alt text is not supported" angezeigt werden.
Elementersetzung mit URL
Dieses Beispiel ersetzt ein reguläres Element! Die Inhalte des Elements werden durch ein SVG mithilfe des <url>
-Typs ersetzt.
Pseudo-Elemente werden nicht auf ersetzte Elemente angewendet. Da dieses Element ersetzt wird, werden alle passenden ::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 einzufü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
Wenn Inhalt auf normale Elemente (anstatt nur auf Pseudo-Elemente) generiert wird, wird das gesamte Element ersetzt. Das bedeutet, dass ::before
- und ::after
-Pseudo-Elemente nicht generiert werden.
Elementersetzung mit <gradient>
Dieses Beispiel zeigt, wie die Inhalte eines Elements mit jedem <image>
-Typ ersetzt werden können, in diesem Fall mit einem CSS-Gradienten. Die Inhalte des Elements werden mit einem linear-gradient()
ersetzt. Mit @supports
bieten wir Alt-Text-Unterstützung und einen repeating-linear-gradient()
für Browser, die Alt-Text bei der Ersetzung von Elementinhalten unterstützen.
HTML
<div id="replaced">I disappear</div>
CSS
div {
border: 1px solid;
background-color: #ccc;
min-height: 100px;
min-width: 100px;
}
#replaced {
content: linear-gradient(#639f, #c96a);
}
@supports (content: linear-gradient(#000, #fff) / "alt text") {
#replaced {
content: repeating-linear-gradient(blue 0, orange 10%) /
"Gradients and alt text are supported";
}
}
Ergebnis
Prüfen Sie die Browser-Kompatibilitätstabelle. Alle Browser unterstützen Gradienten, und alle Browser unterstützen das Ersetzen von Elementen mit Bildern, aber nicht alle unterstützen Gradienten als content
-Wert, und nicht alle unterstützen Alt-Text bei Ersetzungen. Wenn der Browser ein Kästchen ohne Gradient anzeigt, wird das Ersetzen von Elementen unterstützt, aber Gradienten werden nicht als Inhalt-Wert unterstützt. Wenn das Element mit einem gestreiften Gradient ersetzt wird, wird beides unterstützt.
Elementersetzung mit image-set()
Dieses Beispiel ersetzt den Inhalt eines Elements mit einem image-set()
. Wenn die Anzeige normal aufgelöst ist, wird 1x.png
angezeigt; auf Bildschirmen mit höherer Auflösung wird das Bild 2x.png
angezeigt.
HTML
<div id="replaced">Mozilla</div>
CSS
#replaced {
content: image-set(
"1x.png" 1x,
"2x.png" 2x
);
}
Ergebnis
Spezifikationen
Specification |
---|
CSS Generated Content Module Level 3 # content-property |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
::after
::before
::marker
contain
quotes
<gradient>
image-set()
<url>
-
CSS generierte Inhalte-Modul
-
CSS Listen und Zähler-Modul
-
Browser-Barrierefreiheitsbereiche: Firefox Accessibility inspector, Chrome Accessibility pane, und Safari Accessibility tree