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.

Die content-Eigenschaft von CSS ersetzt Inhalte mit einem generierten Wert. Sie kann verwendet werden, um zu definieren, was innerhalb eines Elements oder Pseudo-Elements gerendert wird. Für Elemente gibt die content-Eigenschaft an, ob das Element normalerweise (normal oder none) gerendert wird oder mit einem Bild (und dem zugehörigen "alt"-Text) ersetzt wird. Für Pseudo-Elemente und Randboxen definiert content die Inhalte 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 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 von zwei Schlüsselwörtern — none oder normal.
  • <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 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 einer <string> oder eines <counter>, dem ein Schrägstrich (/) vorangeht.

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

none

Wird ein Pseudo-Element angewendet, wird das Pseudo-Element nicht generiert. Wird ein Element angewendet, hat der Wert keine Auswirkung.

normal

Der Standardwert. Wird zu none für die ::before und ::after Pseudo-Elemente berechnet. Für andere Pseudo-Elemente wird der Inhalt der initiale (oder normale) Inhalt sein, der für diesen ::marker, ::placeholder oder ::file-selector-button erwartet wird. Für reguläre Elemente oder Seitenrandboxen wird dies in die Nachkommen des Elements berechnet.

<string>

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

<image>

Ein <image>, das ein darzustellendes Bild darstellt. Dies kann einem <url>, image-set(), oder <gradient> Datentyp, oder einem Teil der Webseite selbst entsprechen, definiert durch die element() Funktion.

<counter>

Der <counter>-Wert ist ein CSS-Zähler, in der Regel eine Zahl, die durch Berechnungen definiert wird, die durch die <counter-reset> und <counter-increment> Eigenschaften definiert sind. Sie 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 angegebenen Namens im Bereich des angegebenen Pseudo-Elements. Er ist 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 angegebenen Namen im Bereich des angegebenen Pseudo-Elements, von außen nach innen, getrennt durch die angegebene Zeichenfolge. Die Zähler werden im angegebenen <list-style-type> dargestellt (decimal standardmäßig).

<quote>

Der <quote> Datentyp beinhaltet 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ührt keinen Inhalt ein, sondern 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 erstellen, die vom Zielende eines Links erhalten werden. Siehe Formale Syntax.

<leader()>

Der <leader()> Datentyp enthält eine Führungsfunktion: leader( <leader-type> ). Diese Funktion akzeptiert die Schlüsselwortwerte dotted, solid, oder space (gleichbedeutend mit leader("."), leader("_"), und leader(" "), bzw.) oder eine <string> als Parameter. Wenn sie unterstützt wird und als Wert für content verwendet wird, wird der bereitgestellte Führungstyp als sich wiederholendes Muster eingefügt, das visuell ü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 ungeparste Zeichenfolge, die den Attributnamen darstellt. Wenn kein Attribut x vorhanden ist, wird eine leere Zeichenfolge zurückgegeben. Die Groß-/Kleinschreibungsunempfindlichkeit des Attributnamens-Parameters hängt von der Dokumentsprache ab.

Alternativtext: / <string> | <counter>

Alternativtext kann für ein Bild oder beliebige <content-list>-Elemente angegeben werden, indem ein Schrägstrich und dann eine Zeichenfolge oder ein Zähler hinzugefügt werden. Der Alternativtext ist für die Sprachausgabe durch Screenreader gedacht, kann aber auch in einigen Browsern angezeigt werden. Beachten Sie, dass, wenn der Browser Alternativtext nicht unterstützt, die content-Deklaration als ungültig angesehen und ignoriert wird. Die / <string> oder / <counter> Datentypen spezifizieren den "alt text" für das Element.

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 ist nicht im DOM enthalten. Daher wird er nicht im Barrierefreiheitsbaum dargestellt und bestimmte Kombinationen von Hilfstechnologie/Browser werden ihn nicht ansagen. Wenn der Inhalt Informationen vermittelt, die entscheidend für das Verständnis der Seite sind, ist es besser, ihn im Haupttext des Dokuments einzuschließen.

Wenn eingefügter Inhalt nicht dekorativ ist, stellen Sie sicher, dass die Informationen den Hilfstechnologien zur Verfügung stehen und auch verfügbar sind, wenn CSS deaktiviert ist.

Beispiele

Die ersten fünf Beispiele erzeugen generierte Inhalte auf Pseudo-Elementen. Die letzten drei sind Beispiele für Elementersetzung.

Anhängen von Zeichenfolgen 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

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 gefärbte 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 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, daher würden die Anführungszeichen in diesem Beispiel erscheinen, ohne dass sie ausdrücklich gesetzt werden. Sie hätten durch das Setzen der entsprechenden content-Eigenschaftswerte auf no-open-quote und no-close-quote oder durch das Setzen beider auf none abgeschaltet werden können. Sie können auch abgeschaltet werden, indem die quotes-Eigenschaft auf none gesetzt wird.

Hinzufügen von Text zu Listenpunkte-Zählern

Dieses Beispiel kombiniert einen Zähler, der zwischen zwei <string>-Elementen eingebettet ist, die allen Listenelementen vorangestellt werden. Dadurch wird ein detaillierterer Marker für Listenelemente (<li>) innerhalb ungeordneter Listen (<ol>) erstellt.

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 auf jedem Marker des Listenelements fügt den Text "item " als Präfix hinzu, einschließlich einem Leerzeichen, um das Präfix vom Zähler zu trennen, der von ": ", einem Doppelpunkt und einem zusätzlichen Leerzeichen gefolgt wird. Die counters()-Funktion definiert einen numerischen items-Zähler, bei dem die Zahlen verschachtelter geordneter 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 Attribut-Selektor, um jeden vollständig qualifizierten sicheren Link auszuwählen und den href-Attributwert nach dem Linktext als Inhalt des ::after Pseudo-Elements hinzuzufügen.

HTML

html
<ul>
  <li><a href="http://clevelandohioweatherforecast.com//pFad.php?u=https%3A%2F%2Fmozilla.com">Mozilla</a></li>
  <li><a href="http://clevelandohioweatherforecast.com//pFad.php?u=http://developer.mozilla.org/">MDN</a></li>
  <li><a href="http://clevelandohioweatherforecast.com//pFad.php?u=https%3A%2F%2Fopenwebdocs.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: " mit einem Leerzeichen voransteht, alles in Klammern.

Hinzufügen eines Bildes mit Alternativtext

Dieses Beispiel fügt ein Bild vor allen Links ein. Es werden zwei content-Werte bereitgestellt. Der spätere content-Wert enthält ein Bild mit Alternativtext, das von einem Screenreader als Sprache wiedergegeben werden kann. Unterstützt ein Browser den Alternativtext nicht, wird diese Deklaration als ungültig betrachtet und der vorherige content-Wert angezeigt. Diese Fallback-Inhaltsliste enthält ein Bild und die Nachricht " - alt text is not supported - ".

HTML

html
<a href="http://clevelandohioweatherforecast.com//pFad.php?u=https%3A%2F%2Fwww.mozilla.org%2Fen-US%2F">Mozilla Home Page</a>

CSS

Der CSS zeigt das Bild und setzt den Alternativtext, so wie es unten gezeigt wird. Dies setzt auch die Schriftart und Farbe für den Inhalt. Dies wird in Browsern verwendet, die den Alternativtext anzeigen und in Browsern, die den Alternativtext 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 Alternativtext-Syntax unterstützt wird, wird der Wert im Barrierefreiheitsbaum des Browsers sichtbar gemacht. Konsultieren Sie den Abschnitt Siehe auch für browserspezifische Barrierefreiheits-Panels.

Wenn ein Screenreader verwendet wird, sollte er das Wort "MOZILLA" aussprechen, wenn er das Bild erreicht. Sollte dies unterstützt werden (wenn der Hinweis "alt text is not supported" nicht angezeigt wird), können Sie das ::before Pseudo-Element mit Ihrem Entwicklertools-Auswahlwerkzeug auswählen und den zugänglichen Namen im Barrierefreiheits-Panel ansehen.

In Browsern, die die Alternativtext-Syntax nicht unterstützen, ist die komplette Deklaration mit dem Alternativtext ungültig. In diesem Fall wird der vorherige content-Wert verwendet, das Bild und den Text "alt text is not supported" anzeigend.

Ersatz von Elementen mit URL

Dieses Beispiel ersetzt ein reguläres Element! Der Inhalt des Elements wird mit einem SVG mithilfe des <url> Typen ersetzt.

Pseudo-Elemente werden auf ersetzten Elementen nicht gerendert. Da dieses Element ersetzt wird, werden passende ::after oder ::before nicht generiert oder angewendet. Um dies zu demonstrieren, inkludieren wir einen ::after Deklarationsblock, der versucht, die id als generierten Inhalt hinzuzufü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

Beim Generieren von Inhalten auf regulären Elementen (anstatt nur auf Pseudo-Elementen) wird das gesamte Element ersetzt. Dies bedeutet, dass ::before und ::after Pseudo-Elemente nicht generiert werden.

Ersatz von Elementen mit <gradient>

Dieses Beispiel demonstriert, wie die Inhalte eines Elements durch einen beliebigen <image>-Typ ersetzt werden können, in diesem Fall ein CSS-Verlauf. Der Inhalt des Elements wird durch einen linear-gradient() ersetzt. Mit @supports bieten wir Unterstützung für Alternativtext und einen repeating-linear-gradient() für Browser, die Alternativtext 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

Überprüfen Sie die Browser-Kompatibilitäts-Tabelle. 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 und nicht alle Browser unterstützen Alternativtext bei Ersetzungen. Wenn der Browser eine Box ohne Verlauf anzeigt, werden Ersetzungen unterstützt, aber Verläufe nicht als Inhaltsersatzwert unterstützt. Wenn das Element durch einen gestreiften Verlauf ersetzt wird, unterstützt der Browser beides.

Ersatz von Elementen 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 Bild angezeigt, Screens mit einer höheren Auflösung zeigen das 2x.png Bild.

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