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 alternativer Textwert eines <string> oder <counter>, dem ein Schrägstrich (/) vorangestellt ist.

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

none

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

normal

Der Standardwert. Berechnet sich zu none für die ::before- und ::after-Pseudo-Elemente. Für andere Pseudo-Elemente sind die Inhalte die ursprünglichen (oder normalen) Inhalte, die für das ::marker, ::placeholder oder ::file-selector-button erwartet werden. Für reguläre Elemente oder Seitenränder berechnet sich dies zu den Nachfahren des Elements.

<string>

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

<image>

Ein <image>, das ein darzustellendes Bild darstellt. Dies kann gleich einem <url>, image-set(), oder <gradient>-Datentyp sein, oder ein 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 bereitgestellt werden. Er kann entweder mit der counter()- oder der 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 des angegebenen Pseudo-Elements. Er wird im angegebenen <list-style-type> (decimal standardmäßig) formatiert.

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 Geltungsbereich des gegebenen Pseudo-Elements, von außen nach innen, getrennt durch den angegebenen String. Die Zähler werden in dem angegebenen <list-style-type> (decimal standardmäßig) dargestellt.

<quote>

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

open-quote und close-quote

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

no-open-quote und no-close-quote

Fügt keinen Inhalt hinzu, erhöht (verringert) jedoch das Verschachtelungsniveau von Anführungszeichen.

<target>

Der <target>-Datentyp umfasst drei Ziel-Funktionen, <target-counter()>, <target-counters()> und <target-text()>, die Querverweise aus dem Ziel eines Links erstellen. Siehe Formale Syntax.

<leader()>

Der <leader()>-Datentyp umfasst eine Leader-Funktion: leader( <leader-type> ). Diese Funktion akzeptiert die Schlüsselwert dotted, solid, oder space (entspricht leader("."), leader("_"), und leader(" ")) 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 Inhalte ü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 nicht geparster String, der den Attributnamen darstellt. Wenn es kein Attribut x gibt, wird ein leerer String zurückgegeben. Die Groß- und Kleinschreibung des Attributnamens-Parameters hängt von der Dokumentensprache ab.

Alternativtext: / <string> | <counter>

Alternativtext kann für ein Bild oder alle <content-list>-Elemente angegeben werden, indem ein Schrägstrich und dann ein String aus Text oder ein Zähler angehängt wird. Der Alternativtext ist für die Sprachausgabe durch Screenreader gedacht, kann jedoch 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  

Durch CSS generierte Inhalte sind nicht im DOM enthalten. Daher werden sie nicht im Zugänglichkeitsbaum dargestellt und bestimmte Kombinationen aus Hilfstechnologien und Browsern werden ihn nicht ankündigen. Wenn der Inhalt Informationen vermittelt, die wichtig für das Verständnis des Zwecks der Seite sind, ist es besser, ihn im Hauptdokument zu platzieren.

Wenn eingefügter Inhalt nicht dekorativ ist, vergewissern Sie sich, dass die Informationen den eingesetzten Technologien der Hilfsmittel zur Verfügung stehen und auch verfügbar sind, wenn CSS deaktiviert ist.

• Barrierefreiheit von CSS-generierten Inhalten – Tink (2015)
• WCAG, Leitfaden 1.3: Inhalte erstellen, die auf verschiedene Arten präsentiert werden können
• Verständnis des Erfolgskriteriums 1.3.1 | W3C-Verständnis von WCAG 2.0
• Fehlgeschlagenes Erfolgskriterium 1.3.1: Einfügen von nicht dekorativem 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 hinter den 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 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 hinzu, sodass die Anführungszeichen in diesem Beispiel erscheinen würden, ohne dass sie ausdrücklich gesetzt werden müssen. Sie könnten durch Festlegen der jeweiligen content-Eigenschaftswerte auf no-open-quote und no-close-quote oder auf none deaktiviert werden. Sie können auch deaktiviert werden, indem die quotes-Eigenschaft auf none gesetzt wird.

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

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 in jedem Markierungszeichen des Listenelements fügt das Präfix "item " hinzu, einschließlich eines Raums, um das Präfix vom Zähler zu trennen, gefolgt von ": ", einem Doppelpunkt und einem zusätzlichen Raum. Die counters()-Funktion definiert eine numerische items-Zählervariable, bei der die Zahlen verschachtelter geordneter Listen in den meisten Browsern durch einen Punkt (.) getrennt werden.

Dieses Beispiel ist nützlich für Druckstile. Es verwendet einen Attributselektor, 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, mit "URL: " vorangestellt, begleitet von einem Raum, alles in Klammern.

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, den ein Screenreader als Sprache ausgeben kann.

HTML

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

CSS

Der CSS-Code, um das Bild anzuzeigen und den alternativen Text festzulegen, wird unten gezeigt. Dies legt auch die Schriftart 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 Screenreader verwenden, sollte er das Wort "MOZILLA" sprechen, wenn er zum Bild gelangt. Sie können das ::before-Pseudo-Element mit Ihrem Entwicklertools-Auswahlwerkzeug auswählen und den Barrierefreien Namen im Zugänglichkeitsfenster anzeigen.

Dieses Beispiel ersetzt ein reguläres Element! Die Inhalte des Elements werden mit einer SVG unter Verwendung des <url>-Typs 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, fügen wir ein ::after-Deklarationsblock hinzu, 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 (anstatt 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 jeden Typ von <image>, in diesem Fall ein CSS-Gradient, ersetzt werden können. Die Inhalte des Elements werden mit einem 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 das Browser-Kompatibilitätsdiagramm. 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 durch ein image-set(). Wenn das Display der Benutzer 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">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
• ::scroll-button()
• ::scroll-marker
• :target-current
• contain
• quotes
• <gradient>
• image-set()
• <url>
• Ersatz-Elemente
• CSS-generierte Inhalte Modul
• CSS-Listen und Zähler Modul
• Zugänglichkeitspanels der Browser: Firefox Accessibility Inspector, Chrome Accessibility Pane, und Safari Accessibility Tree