In einigen Fällen kann es sinnvoll sein, Dokumentinhalte durch Inhalte zu ergänzen, die nicht explizit im Dokument notiert und somit nicht Teil des Dokumentstammbaums sind. Bei Listen beispielsweise generiert der Browser die Listenelementmarkierung automatisch in Form eines Aufzählungszeichens vor ungeordneten und einer Nummerierung bei Aufzählungslisten, aber spezielle Zeichen oder Zeichenketten könnten auch in anderen Fällen automatisch erzeugt werden, etwa die Zeichenkette »Abbildung: « vor Bildunterschriften oder Nordostpfeile vor externen Links. Wie sich derartige Inhalte per CSS generieren lassen, beschreibe ich in diesem Abschnitt.

Generierter Inhalt: Die Eigenschaft content

Die Eigenschaft content kann zusammen mit den Pseudoelementen :before und :after dafür verwendet werden, Inhalt in einem Dokument zu erzeugen, der nicht aus dem Dokumentstammbaum kommt. Dabei gibt die Eigenschaft display an, mit welcher Art von Box der erzeugte Inhalt dargestellt werden soll.

Die einzelnen Werte der Eigenschaft content erfordern jeweils eine kurze Erklärung.

• <Zeichenkette>: Es wird eine Zeichenkette ausgegeben, die innerhalb des Werts in einfache oder doppelte Anführungszeichen eingeschlossen werden muss. Im folgenden Beispiel wird vor externen Links (genauer: vor Elementen vom Typ a, deren href-Attribut mit http:// oder https:// beginnt) ein Nordostpfeil und ein geschütztes Leerzeichen erzeugt (siehe auch Kapitel 6.4.2 »Maskierung«).

  a[href^="http://"]:before,
  a[href^="https://"]:before {
    content: "\2197\00A0";
  }

• <URI>: Es wird eine externe Ressource eingebunden, im Allgemeinen ein Bild. Folgendes Beispiel zeigt die Einbindung eines grafischen Symbols vor externen Links.

  a[href^="http://"]:before,
  a[href^="https://"]:before {
    content: url(/images/externe_links.gif);
  }

• <Zähler>: Die Werte counter() und counters() generieren zusammen mit den Eigenschaften counter-increment und counter-reset Zähler ähnlich denen bei geordneten Listen. Die Anwendung wird weiter unten genauer erläutert.

• open-quote und close-quote, no-open-quote und no-close-quote: open-quote und close-quote fügen Anführungszeichen ein, die mittels der Eigenschaft quotes definiert wurden. no-open-quote und no-close-quote geben explizit an, dass keine Anführungszeichen dargestellt werden sollen.

  Ich gehe auf diese Werte wie auch auf die Eigenschaft quotes in diesem Buch nicht weiter ein. Die Generierung von Anführungszeichen per CSS sowie die Verwendung von Elementen wie q, die dies von selbst tun beziehungsweise tun sollten, ist keine gute Idee und funktioniert browserübergreifend auch nicht besonders gut.

• attr(X): Das Attribut X des Elements wird vor oder nach dem Element ausgegeben. Wenn das angegebene Attribut nicht existiert, wird eine leere Zeichenkette ausgegeben. Im folgenden Beispiel wird nach externen Links mit einer Kombination aus generierten Strings und Attributfunktion der URL der Website ausgegeben. Da dies nur bei Printmedien sinnvoll ist, in denen es nicht möglich ist, Verweisen direkt zu folgen, werden die entsprechenden Regeln auf das Medium print beschränkt.

  @media print {
    a {
      color: black;
      background-color: white;
      text-decoration: none;
    }
    a[href^="http://"]:after,
    a[href^="https://"]:after {
      content: " (" attr(href) ")";
    }
  }

• none: Der in der Regel beschriebene zu generierende Inhalt wird nicht erzeugt.

• normal: Der in der Regel beschriebene zu generierende Inhalt wird nicht erzeugt. Dieser Wert wurde in CSS 2.1 mit Blick auf CSS 3 ergänzt, da er sich dort von none deutlich unterscheiden soll. Allerdings bleibt abzuwarten, wie sich dieses Modul von CSS 3 entwickeln wird; der »aktuelle« Arbeitsentwurf ist mittlerweile seit über fünf Jahren unverändert.

Zum Seitenanfang

Zähler: Die Eigenschaften counter-increment und counter-reset

Die Eigenschaft counter-increment dient dazu, einen oder mehrere Zähler um einen bestimmten Wert hochzuzählen.

Alle aufgeführten Zähler werden um die zugeordnete Zahl hochgezählt. Wird keine Zahl angegeben, wird der entsprechende Zähler um den Wert 1 hochgezählt. Die definierten Zähler werden in Kombinationen mit den Funktionen counter() und counters() der Eigenschaft content verwendet.

Die Eigenschaft counter-reset dient dazu, einen oder mehrere Zähler auf einen bestimmten Wert einzustellen.

Alle aufgeführten Zähler werden auf die zugeordnete Zahl gesetzt. Wird keine Zahl angegeben, wird der entsprechende Zähler auf den Wert 0 gesetzt.

Im folgenden Beispiel werden alle Überschriften erster Ordnung eines Dokuments durchnummeriert. Dazu wird der Zähler zunächst definiert: Der Name des Zählers lautet abschnitt, der Inkrementwert, also die Zahl, um die hochgezählt wird, ist nicht vorgegeben und folglich laut Spezifikation 1. Nachfolgend wird der Zähler und anschließend ein Leerzeichen über die content-Eigenschaft ausgegeben. Opera-Browser nummerieren die Überschriften nun korrekt.

Gecko-Browser nummerieren jedoch jede Überschrift mit 1. Um dieses Verhalten zu »reparieren«, muss der Zähler am umschließenden Block, in diesem Fall body, voreingestellt werden, hier auf den Standardwert 0.

Beim ersten Auftreten des Elements h1 wird dieses nun um den Schritt 1 auf den Wert 1 hochgezählt, beim zweiten Auftreten erneut um 1 auf 2, beim dritten Auftreten auf 3 und so weiter.

h1:before {
  counter-increment: abschnitt;
  content: counter(abschnitt) " ";
}
body { counter-reset: abschnitt; }

Standardmäßig werden Zähler mit Dezimalzahlen dargestellt, allerdings ist es auch möglich, die Werte der Eigenschaft list-style-type als Zählerdarstellung zu definieren. Um die Überschriften im vorangegangenen Beispiel mit römischen Zahlen zu nummerieren, müssen Sie die entsprechende Regel wie folgt ergänzen:

h1:before {
  content: counter(abschnitt, upper-roman) " ";
  counter-increment: abschnitt;
}

Zähler sind »selbstverschachtelnd«, das heißt, eine Wiederverwendung eines Zählers in einem untergeordneten Element erzeugt automatisch eine neue Instanz dieses Zählers. Durch diese Festlegung ist es beispielsweise möglich, denselben Zähler für verschachtelte Listen zu verwenden.

Folgendes Beispiel ändert das Zählverhalten verschachtelter geordneter Listen, deren Nummerierung standardmäßig bei 1 beginnt, unabhängig von der Verschachtelungstiefe. Um die Listen in Abhängigkeit von ihrer Verschachtelung zu nummerieren, wird die automatische Nummerierung mittels list-style-type: none; abgeschaltet und stattdessen ein eigener Zähler definiert. Die Vorgehensweise ist dieselbe wie bei der Nummerierung der Überschriften. Der einzige Unterschied liegt in der Funktion counters(zaehler, "."), die eine Zeichenkette generiert, die die Werte aller Zähler enthält, getrennt durch eine vorgegebene Zeichenkette, in diesem Fall einen Punkt.

ol {
  list-style-type: none;
  counter-reset: zaehler;
}
li:before {
  counter-increment: zaehler;
  content: counters(zaehler, ".");
  margin-right: .5em;
}