Zurück: Anzeige von Elementen
Weiter: Tabellen

Generierter Content

:before und :after

:before und :after sind so genannte Pseudo-Elemente, mit denen Sie zusätzlichen Content vor oder nach einem Element generieren können. Die zur Erläuterung der Eigenschaft content aufgeführten Beispiele machen das deutlich.

content

Sie können die Eigenschaft content zusammen mit den Pseudo-Elementen :before und :after verwenden, um zusätzliche Inhalte einzufügen.

<Zeichenkette>
Die in Anführungszeichen aufgeführte Zeichenkette wird eingefügt. Als Beispiel: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
   <title>Generierter Content - Anfügen von Zeichenketten</title>
<style type="text/css">
p:before {
   content: "ANFANG - ";
}
p:after {
   content: " - ENDE";
}
</style>

</head>

<body>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat.</p>

<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat.</p>

</body>
</html>

Beispieldokument ansehen

<URI>
Ein Bild oder eine andere Ressource wird eingefügt.
<Zähler>
attr(x)
Der Wert des Attributes x wird dargestellt. Dazu ein Beispiel: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
   <title>Generierter Content - Auslesen von Attributwerten</title>
<style type="text/css">
p:before {
   content: attr(title)": ";
   display: block;
   font-weight: bold;
}
</style>

</head>

<body>

<p title="Erster Abschnitt">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat.</p>

<p title="Zweiter Abschnitt">Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat.</p>

</body>
</html>

Beispieldokument ansehen

Hierbei wird zunächst der Inhalt des title-Attributes ausgelesen und dargestellt. Dem folgt eine Zeichenkette. Beides zusammen wird vor alle Elemente p gesetzt. An diesem Beispiel können Sie sehen, dass auch andere Eigenschaften auf ein Pseudo-Element wie :before angewendet werden können.

open-quote
Es werden öffnende Anführungszeichen eingefügt.
close-quote
Es werden schließende Anführungszeichen eingefügt.
no-open-quote
Öffnende Anführungszeichen werden unterdrückt.
no-close-quote
Schließende Anführungszeichen werden unterdrückt.
inherit

Der Initialwert ist eine leere Zeichenkette.

quotes

Mit der Eigenschaft quotes bestimmen Sie die Art der dargestellten Anführungszeichen.

<Zeichenkette> <Zeichenkette>
Gibt das öffnende und das schließende Anführungszeichen an. Es können beliebig viele Paare angegeben werden, wobei das erste Paar die äußeren Anführungszeichen angibt, das zweite die erste Verschachtelungsebene und so weiter.
none
inherit

Der Initialwert ist abhängig vom User-Agent.

Zähler

Zähler werden in CSS durch die Eigenschaften counter-reset und counter-increment bestimmt. Ich stelle Ihnen die Eigenschaften und ihre möglichen Werte zunächst vor und werde sie dann anhand von Beispielen erläutern.

counter-increment
none
[<Name> <Integer>?]
Der Zähler mit dem angegebenen Namen wird hochzählt. Gewöhnlich wird um 1 hochgezählt. Geben Sie hinter dem Namen einen <Integer> an, wird um diesen hochgezählt. Negative Zahlen sind erlaubt.
inherit
counter-reset
none
[<Name> <Integer>?]
Setzt den Zähler auf einen Wert zurück. Standardmäßig ist das 0, jedoch können Sie mit einem <Integer> hinter dem Namen einen anderen Wert bestimmen.
inherit

Folgendes Beispiel demonstriert das Durchzählen einer Hierarchie von Überschriften:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Counter</title>
<style type="text/css">
h1:before {
   content: counter(abschnitt) " ";
   counter-increment: abschnitt;
   counter-reset: unterabschnitt;
}
h2:before {
   content: counter(abschnitt) "." counter(unterabschnitt) " ";
   counter-increment: unterabschnitt;
}
</style>
</head>

<body>

<h1>Abschnitt</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat.</p>

<h2>Unterabschnitt</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat.</p>

<h2>Unterabschnitt</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat.</p>

<h1>Abschnitt</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat.</p>

<h2>Unterabschnitt</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat.</p>

</body>
</html>

Beispieldokument ansehen

Zunächst wird durch die Deklaration

content: counter(abschnitt) " ";

angegeben, dass vor Überschriften erster Ordnung ein Zähler mit Namen »abschnitt« dargestellt werden soll. Dem Zähler soll eine Zeichenkette in Form eines Leerzeichens folgen. Die Deklaration

counter-increment: abschnitt;

gibt den Zählschritt für den Zähler »abschnitt« an. Da in diesem Fall kein Zählschritt explizit angegeben wurde, gilt standardmäßig der Zählschritt 1. Die Deklaration ist dennoch notwendig, da sonst überhaupt nicht hochgezählt werden würde. Die Deklaration

counter-reset: unterabschnitt;

setzt einen Zähler mit dem Namen »unterabschnitt« bei Auftreten einer Überschrift erster Ordnung auf 0 zurück. Die Regel

h2:before {
   content: counter(abschnitt) "." counter(unterabschnitt) " ";
   counter-increment: unterabschnitt;
}

gibt zwei Zähler für alle Überschriften zweiter Ordnung an: Den bereits bekannten Zähler mit Namen »abschnitt« und einen neuen Zähler »unterabschnitt«. Die Zähler werden durch einen Punkt getrennt. Am Ende folgt wieder ein Leerzeichen. Als zweites wird der Zählschritt wie oben definiert.

In folgendem Beispiel werden verschachtelte, geordnete Listen nummeriert:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Counter - Zweites Beispiel</title>
<style type="text/css">
ol {
   counter-reset: zaehler;
   list-style-type: none;
}
li:before {
   content: counters(zaehler, ".");
   counter-increment: zaehler;
   margin-right: .5em;
}

</style>
</head>

<body>

<ol>
<li>Erster Punkt</li>
<li>Zweiter Punkt</li>
<li>Dritter Punkt
    <ol>
    <li>Erster Unterpunkt</li>
    <li>Zweiter Unterpunkt
        <ol>
        <li>Erster Unterpunkt</li>
        <li>Zweiter Unterpunkt</li>
        <li>Dritter Unterpunkt</li>
        </ol>
     </li>
    <li>Dritter Unterpunkt
        <ol>
        <li>Erster Unterpunkt</li>
        <li>Zweiter Unterpunkt</li>
        <li>Dritter Unterpunkt</li>
        </ol>
    </li>
    <li>Vierter Unterpunkt</li>
    <li>Fünfter Unterpunkt</li>
    </ol>
</li>
<li>Vierter Punkt</li>
</ol>

</body>
</html>

Beispieldokument ansehen

Das Beispiel nutzt die Tatsache, dass in Kindelementen automatisch eine neue Instanz des Zählers angelegt wird. Die Funktion counters(zaehler, ",") generiert eine Zeichenkette, die die Werte aller Zähler enthält, getrennt durch eine vorgegebene Zeichenkette, in diesem Fall ein Komma.

Zurück: Anzeige von Elementen
Weiter: Tabellen
Zum Seitenanfang