content

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 Element der <content-list> ist vom Typ <string>, <image>, <counter>, <quote>, <target> oder <leader()>.
• Ein optionaler Alternativtextwert eines <string> oder <counter>, vorangestellt durch einen Schrägstrich (/).

Die oben erwähnten Schlüsselwörter und Datentypen werden unten ausführlicher beschrieben:

none

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

normal

Der Standardwert. Berechnet sich zu none für die ::before und ::after Pseudo-Elemente. Für andere Pseudo-Elemente wird der Inhalt der anfängliche (oder normale) Inhalt sein, der für das entsprechende ::marker, ::placeholder oder ::file-selector-button erwartet wird. Für reguläre Elemente oder Seitenrandboxen berechnet sich dies zu den Nachfahren des Elements.

<string>

Eine Folge von Zeichen, die in passende einfache oder doppelte Anführungszeichen eingeschlossen sind. Mehrere String-Werte werden miteinander verkettet (es gibt keinen Verkettungsoperator in CSS).

<image>

Ein <image>, das ein darzustellendes 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, in der Regel eine Zahl, die durch Berechnungen definiert wird, die durch die <counter-reset> und <counter-increment> Eigenschaften festgelegt sind. Er kann angezeigt werden, entweder durch die counter() oder counters() Funktion.

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 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 Bereich des angegebenen Pseudo-Elements, von außen nach innen, getrennt durch die angegebene Zeichenfolge. Die Zähler werden in der angegebenen <list-style-type> gerendert (decimal standardmäßig).

<quote>

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

open-quote und close-quote

Diese Werte werden durch den passenden String aus der quotes Eigenschaft ersetzt.

no-open-quote und no-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 vom Zielende eines Links erstellen. Siehe Formale Syntax.

<leader()>

Der <leader()>-Datentyp umfasst eine Führungsfunktion: leader( <leader-type> ). Diese Funktion akzeptiert die Schlüsselwortwerte dotted, solid oder space (gleich leader("."), leader("_") und leader(" ")), oder einen <string> als Parameter. Wenn unterstützt und als Wert für content 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 Ursprungs-Elements des Pseudo-Elements ab. Der Wert des Attributs x des Elements ist ein unanalysierter String, der den Namen des Attributs darstellt. Wenn es kein Attribut x gibt, wird ein leerer String zurückgegeben. Die Groß-/Kleinschreibung des Attributsnamens hängt von der Dokumentsprache ab.

Alternativer Text: / <string> | <counter>

Ein Alternativtext kann für ein Bild oder beliebige <content-list>-Einträge angegeben werden, indem ein Schrägstrich und dann eine Textzeichenfolge oder ein Zähler hinzugefügt werden. Der Alternativtext ist für Sprachausgabe durch Screen-Reader vorgesehen, kann jedoch auch in einigen Browsern angezeigt werden. Beachten Sie, dass, wenn der Browser Alternativtext nicht unterstützt, die content-Deklaration als ungültig und ignoriert wird. Die / <string> oder / <counter> Datentypen spezifizieren den "Alt-Text" für das Element.

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  

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

Wenn eingefügter Inhalt nicht dekorativ ist, stellen Sie sicher, dass die Informationen den unterstützenden Technologien bereitgestellt werden und auch verfügbar sind, wenn CSS abgeschaltet ist.

• Barrierefreiheit von durch CSS generierten Inhalten – Tink (2015)
• WCAG, Leitfaden 1.3: Erstellen Sie Inhalte, die in unterschiedlichen Formen präsentiert werden können
• Erklärung des Erfolgs-Kriteriums 1.3.1 | W3C Verständnis WCAG 2.0
• Verstoß gegen das Erfolgs-Kriterium 1.3.1: Einfügen von nicht-dekorativem generiertem Inhalt Techniken für WCAG 2.0

Die ersten fünf Beispiele erzeugen generierten Inhalt auf Pseudo-Elementen. Die letzten drei sind Beispiele für den Ersatz von Elementen.

Dieses Beispiel fügt generierten Text nach dem Text von Elementen ein, die einen bestimmten Klassennamen haben. Der Text wird 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

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: #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 sprachbasiert ist. Browser fügen standardmäßig vor und nach <q>-Elementen Öffnungs- und Schlusszeichen hinzu, sodass die Anführungszeichen in diesem Beispiel auch ohne explizite Festlegung erscheinen würden. Sie könnten abgeschaltet werden, indem die entsprechenden content-Eigenschaftswerte auf no-open-quote und no-close-quote gesetzt werden, oder indem sie beide auf none gesetzt werden. Sie können auch abgeschaltet werden, indem die quotes Eigenschaft auf none gesetzt wird.

Dieses Beispiel kombiniert einen Zähler zwischen zwei <string>s, die allen Listenelementen vorangestellt sind, um einen detaillierteren Marker für Listenelemente (<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>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 auf jedem Listenelement-Marker fügt den Text "item" als Präfix hinzu, einschließlich eines Leerzeichens, um das Präfix vom Zähler zu trennen, der gefolgt wird von ": ", einem Doppelpunkt und einem weiteren Leerzeichen. Die counters() Funktion definiert einen numerischen items-Zähler, bei dem die Nummern verschachtelter geordneter Listen in den meisten Browsern durch einen Punkt (.) getrennt sind.

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 Wert des href-Attributs nach dem Linktext 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, vorangestellt von "URL: ", mit einem Leerzeichen, alles in Klammern.

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 Alternativtext, den ein Screen-Reader als Sprache ausgeben kann. Wenn ein Browser keinen Alternativtext unterstützt, wird diese Deklaration als ungültig betrachtet, wobei der vorherige content-Wert angezeigt wird. Diese Ersatz-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

Der CSS-Code, um das Bild anzuzeigen und den Alternativtext festzulegen, ist unten dargestellt. Dies setzt auch die Schriftart und Farbe für den Inhalt. Dies wird in Browsern verwendet, die den Alternativtext anzeigen und in Browsern, die keinen Alternativtext unterstützen und den Ersatzwert content 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

Wenn Sie einen Screen-Reader verwenden, sollte er das Wort "MOZILLA" sprechen, wenn er das Bild erreicht. Wenn unterstützt (wenn "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 Barrierefreiheit-Panel betrachten.

In Browsern, die die Alternativtext-Syntax nicht unterstützen, ist die gesamte Deklaration, die den Alt-Text enthält, ungültig. In diesem Fall wird der vorherige content-Wert verwendet und das Bild und der Text "alt text is not supported" werden angezeigt.

Dieses Beispiel ersetzt ein reguläres Element! Der Inhalt des Elements wird durch ein SVG mit dem <url> Typ ersetzt.

Pseudo-Elemente werden bei ersetzten Elementen nicht gerendert. Da dieses Element ersetzt wird, werden alle übereinstimmenden ::after oder ::before nicht generiert oder angewendet. Um dies zu demonstrieren, haben wir einen ::after Deklarationsblock eingefügt, 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 (statt nur auf Pseudo-Elementen) wird das gesamte Element ersetzt. Das bedeutet, dass ::before und ::after Pseudo-Elemente nicht generiert werden.

Dieses Beispiel zeigt, wie die Inhalte eines Elements durch einen beliebigen Typ von <image>, in diesem Fall ein CSS-Gradient, ersetzt werden können. Die Inhalte des Elements werden durch einen linear-gradient() ersetzt. Mit @supports bieten wir Unterstützung für Alt-Text und einen repeating-linear-gradient() für Browser, die Alt-Text mit Elementinhalt-Ersatz 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

Überprü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 Browser unterstützen Gradienten als content-Wert und nicht alle Browser 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 Content-Ersatzwert unterstützt. Wenn das Element mit einem gestreiften Gradient ersetzt wird, unterstützt der Browser beides.

Dieses Beispiel ersetzt den Inhalt eines Elements durch ein 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">Mozilla</div>

CSS

div {
  width: 100px;
  border: 1px solid lightgrey;
}

#replaced {
  content: image-set(
    "1x.png" 1x,
    "2x.png" 2x
  );
}

Ergebnis

• ::after
• ::before
• ::marker
• contain
• quotes
• <gradient>
• image-set()
• <url>

• Ersetzte Elemente

• Durch CSS generierte Inhalte Modul

• CSS Listen und Zähler Modul

• Browser-Barrierefreiheitspanels: Firefox Accessibility Inspector, Chrome Accessibility Pane, und Safari Accessibility Tree