content

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.

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  

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.

• Barrierefreiheit von CSS-generiertem Inhalt – Tink (2015)
• WCAG, Richtlinie 1.3: Erstellen Sie Inhalte, die auf verschiedene Arten präsentiert werden können
• Verständnis von Erfolgskriterium 1.3.1 | W3C Understanding WCAG 2.0
• Fehler von Erfolgskriterium 1.3.1: Einfügen von nicht dekorativem generiertem Inhalt Techniken für WCAG 2.0

Die ersten fünf Beispiele erstellen generierten Inhalt bei Pseudo-Elementen. Die letzten drei Beispiele zeigen Beispiele für Elementersetzungen.

Dieses Beispiel fügt generierten Text nach dem Text von Elementen ein, die einen bestimmten Klassennamen haben. Der Text wird in rot dargestellt.

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 farbige 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 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.

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

<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 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.

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

<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, dem "URL: ", gefolgt von einem Leerzeichen, alles in Klammern, vorangestellt ist.

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

<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.

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 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.

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

<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

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.

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

<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

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.

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

<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

• CSS generierte Inhalte-Modul

• CSS Listen und Zähler-Modul

• Browser-Barrierefreiheitsbereiche: Firefox Accessibility inspector, Chrome Accessibility pane, und Safari Accessibility tree