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

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

none

Wird ein Pseudo-Element angewendet, wird das Pseudo-Element nicht generiert. Wird es auf ein Element angewendet, hat der Wert keinen Effekt.

normal

Der Standardwert. Berechnet sich zu none für die ::before und ::after Pseudo-Elemente. Für andere Pseudo-Elemente entspricht der Inhalt dem anfänglichen (oder normalen) Inhalt, der für das jeweilige ::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 Zeichenfolge, die in passenden einfachen oder doppelten Anführungszeichen eingeschlossen ist. Mehrere Zeichenfolgenwerte 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 selbst, 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 von den <counter-reset> und <counter-increment> Eigenschaften vorgenommen werden. Er kann entweder durch die 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 Geltungsbereich beim angegebenen Pseudo-Element. 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 generierte Text ist der Wert aller Zähler mit dem angegebenen Namen im Geltungsbereich beim angegebenen Pseudo-Element, von äußerem nach innerem, getrennt durch die angegebene Zeichenfolge. Die Zähler werden in der angegebenen <list-style-type> angezeigt (decimal standardmäßig).

<quote>

Der <quote>-Datentyp umfasst 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, erhöht aber (verringert) die Verschachtelungsebene für Zitate.

<target>

Der <target>-Datentyp umfasst drei Zielfunktionen: <target-counter()>, <target-counters()> und <target-text()>, die Querverweise erstellen, die vom Zielende eines Links bezogen werden. Siehe Formale Syntax.

<leader()>

Der <leader()>-Datentyp beinhaltet eine Leader-Funktion: leader( <leader-type> ). Diese Funktion akzeptiert die Schlüsselwortwerte dotted, solid oder space (entspricht leader("."), leader("_") und leader(" ")), oder einen <string> als Parameter. Wenn unterstützt und als Wert für content verwendet, wird der angegebene Leadertyp als sich wiederholendes Muster eingefügt, das visuell Inhalte ü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 nicht geparste Zeichenfolge, die den Attributnamen darstellt. Wenn kein Attribut x vorhanden ist, wird eine leere Zeichenfolge zurückgegeben. Die Groß-/Kleinschreibungsempfindlichkeit des Attributnamenparameters 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 gefolgt von einer Textzeichenfolge oder einem Zähler angehängt wird. Der Alternativtext ist für die Sprachausgabe von Bildschirmlesern bestimmt, kann aber auch in einigen Browsern angezeigt werden. 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  

CSS-generierte Inhalte sind nicht im DOM enthalten. Deshalb werden sie nicht im Barrierefreiheitsbaum dargestellt und bestimmte Kombinationen von Hilfstechnologie/Browsern werden sie nicht ankündigen. Wenn der Inhalt Informationen überträgt, 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, stellen Sie sicher, dass die Informationen zugänglich für Hilfstechnologien sind und auch verfügbar sind, wenn CSS ausgeschaltet ist.

• Unterstützung für barrierefreie CSS-generierte Inhalte – Tink (2015)
• WCAG, Richtlinie 1.3: Erstellen Sie Inhalte, die in verschiedenen Formen präsentiert werden können
• Verständnis des Erfolgskriteriums 1.3.1 | W3C Understanding WCAG 2.0
• Scheitern des Erfolgskriteriums 1.3.1: Einfügen von nicht dekorativen generierten Inhalten Techniken für WCAG 2.0

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

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

Dieses Beispiel fügt unterschiedlich 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 generierten Anführungszeichen auf der Sprache basiert. Browser fügen standardmäßig Öffnungs- und Schließungszeichen vor und nach <q>-Elementen hinzu, daher würden die Anführungszeichen in diesem Beispiel erscheinen, ohne dass sie explizit festgelegt werden. Sie hätten ausgeschaltet werden können, indem die jeweiligen content-Eigenschaftswerte auf no-open-quote und no-close-quote gesetzt wurden, oder durch Setzen beider auf none. Sie können auch ausgeschaltet werden, indem die quotes-Eigenschaft auf none gesetzt wird.

Dieses Beispiel kombiniert einen Zähler, der zwischen zwei <string>s eingefügt wird, die zu allen Listenelementen vorangestellt werden. Dadurch entsteht ein detaillierterer Marker für Listenelemente (<li>) innerhalb ungeordneter Listen (<ol>).

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 dem Marker jedes Listenelements fügt das Wort "item" als Präfix hinzu, einschließlich eines Leerzeichens zur Trennung des Präfixes vom Zähler, gefolgt von ": ", einem Doppelpunkt und einem zusätzlichen Leerzeichen. Die counters()-Funktion definiert einen numerischen items-Zähler, bei dem die Nummern der verschachtelten geordneten Listen in den meisten Browsern mit einem 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 mit "URL: ", mit einem Leerzeichen, alles in Klammern.

Dieses Beispiel fügt vor allen Links ein Bild ein. Es werden zwei content-Werte bereitgestellt. Der spätere content-Wert enthält ein Bild mit Alternativtext, den ein Bildschirmleser als Sprache ausgeben kann.

HTML

<a href="https://www.mozilla.org/en-US/">Mozilla Home Page</a>

CSS

Der CSS-Code zum Anzeigen des Bildes und Festlegen des Alternativtexts wird unten gezeigt. Dies legt auch die Schrift und Farbe für den Inhalt fest.

a::before {
  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") /
    " MOZILLA: ";
}

Ergebnis

Wenn Sie einen Bildschirmleser verwenden, sollte er das Wort "MOZILLA" sprechen, wenn er das Bild erreicht. Sie können das ::before Pseudo-Element mit Ihrem Entwicklertools-Auswahlwerkzeug auswählen und den zugänglichen Namen im Barrierefreiheitsbereich anzeigen.

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 passenden ::after oder ::before nicht generiert oder angewendet. Um dies zu demonstrieren, fügen wir einen ::after-Deklarationsblock hinzu, in dem versucht wird, die id als generierte Inhalte 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 Inhaltserzeugen auf regulären Elementen (anstelle von nur auf Pseudo-Elementen) wird das gesamte Element ersetzt. Das bedeutet, dass ::before und ::after-Pseudo-Elemente nicht generiert werden.

Dieses Beispiel demonstriert, wie die Inhalte eines Elements durch einen beliebigen <image>-Typ ersetzt werden können, in diesem Fall durch einen CSS-Gradienten. Der Inhalt des Elements wird durch einen linear-gradient() ersetzt. Wir bieten Alt-Text an, 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 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.

Dieses Beispiel ersetzt den Inhalt eines Elements mit einem image-set(). Wenn das Display der Nutzer Normalauflö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

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

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

Ergebnis

• ::after
• ::before
• ::marker
• contain
• quotes
• <gradient>
• image-set()
• <url>
• Ersetzte Elemente
• CSS-generierte Inhalte Modul
• CSS-Listen und Zähler Modul
• Barrierefreiheitspanels der Browser: Firefox Accessibility inspector, Chrome Accessibility pane und Safari Accessibility tree