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

css
/* 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 oder normal.
  • <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 zu none 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 Funktion element().

<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 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 des gegebenen Namens, der im angegebenen Pseudo-Element im Bereich liegt. Er wird im angegebenen <list-style-type>-Format angezeigt (standardmäßig decimal).

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äßig decimal).

<quote>

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

open-quote und close-quote

Diese Werte werden durch die entsprechenden Zeichenkette aus der quotes-Eigenschaft ersetzt.

no-open-quote und no-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üsselwortwerte dotted, solid oder space (entspricht leader("."), leader("_") und leader(" ")), oder eine <string> als Parameter. Wenn unterstützt und als Wert für content 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 Attributelements x ist eine nicht geparste Zeichenkette, die den Attributnamen darstellt. Wenn kein Attribut x 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 die content-Deklaration als ungültig betrachtet und ignoriert. Die / <string> oder / <counter>-Datentypen geben den "Alt-Text" für das Element an.

Formale Definition

Anfangswertnormal
Anwendbar aufAll elements, tree-abiding pseudo-elements, and page margin boxes
VererbtNein
Berechneter WertBei 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.
Animationstypdiskret

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.

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

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

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

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

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

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

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

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

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

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.

css
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

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

CSS

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

html
<div id="replaced">I disappear</div>

CSS

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

html
<div id="replaced">Mozilla</div>

CSS

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