Automatisch generierter Content vor oder nach Inhalten

Absätze mit Paragraphenzeichen ausstatten

Die Pseudo-Elemente ::before und ::after

In CSS3 gibt es neben den Pseudo-Klassen :hover oder :nth-child die beiden Pseudo-Elemente ::before und ::after. Pseudo-Elemente werden syntaktisch korrekt durch zwei Doppelpunkte eingeleitet - es funktioniert aber auch mit nur einem Doppelpunkt, da moderne Browser auch noch den einfachen Doppelpunkt untertstützen. Der doppelte Doppelpunkt soll den Unterschied zwischen Pseuo-Klasse und -Element verdeutlichen.

Die beiden Elemente ::before und ::after werden immer zusammen mit der Eigenschaft content verwendet. Der Inhalte (Wert), welcher der Eigenschaft content zugewiesen wird, wird im HTML-Markup nicht dargestellt, wohl aber vom Brwoser gerendert und auf der HTML-Seite angezeigt. 

Beispiel:

p::before { content: "♦ " }

ergibt:

Sonderzeichen vor Content

Nummerierte Absätze mit ::before

CSS3 hält eine Counter zum Hochzählen von Zählvariablen bereit. So lassen sich auch Listen aus Absätzen erzeugen, die mit einem individuellen "Listensymbol" ausgestattet sind. Hier ein Beispiel für die Darstellung von Absätzen mit Paragraphen-Nummerierung:

CSS:

    body {
    counter-reset: i;
    }
        
    #list p::before {
        counter-increment: i;
        content: '§' counter(i) ': ';
    }

HTML:

<div id="list">
    <p>ein Paragraf</p>
    <p>noch ein Paragraf</p>
    <p>ein weiterer Paragraf</p>
    <p></p>
</div>

ergibt:

Absätze mit Paragraphen-Nummerierung

Jahreszahlen zur Nummerierung

Ein weiteres Anwendungsbeispiel ist die Nummerierung durch Jahreszahlen oder -Dekarden zur historischen Darstellung von Ereignissen z.B. auf einer Seite über die Unternehmensgeschichte oder bei Lebensläufen / der Vita.

CSS:

body {
    counter-reset: i 2017;
    }
        
    #list p:before {
        
        counter-increment: i -1;
        content: counter(i) ': ';
    }

HTML:

<div id="list">
    <p>eine Dekarde</p>
    <p>nächste Dekarde</p>
    <p>noch eine Dekarde</p>
</div>

ergibt:

Nummerierung von Absätzen durch Jahreszahlen

Über counter-reset wird die Jahreszahl, von der abwärts gezählt werden soll (hier das aktuelle Jahr: 2017), definiert. counter-increment bestimmt die Differenz; hier: -1 - es wird also abwärts gezählt. Eine positive Zahl zählt entsprechend aufwärt. Stellt man hier beispielsweise -10 ein, so erfolgt die Nummerierung in Dekaden.

Kapitelnummerierung

Zum Schluss noch das Beispiel für eine klassische Kapitelnummerierung, wie man sie aus Inhaltsverzeichnissen mit Unterkapiteln (z.B. bei wissenschaftlichen Veröffentlichungen) her kennt:

Kapitel-Nummern

Für dieses Beispiel werden nummerierten Listen (<ol>) genutzt:

CSS:

body {
        counter-reset: level1;    
    }
        
    .level2 {
    counter-reset: level2;
    }
    .level3{
    counter-reset: level3;
    }
    
    ol {
        list-style: none;    
        padding-left: 0;
    }
    
    ol ol ol {
        padding-left: 40px;
    }
    
    h1::before {
    counter-increment: level1;
    content: "§ " counter(level1) " ";
    }
    
    h2::before {
    counter-increment: level2;
    content: counter(level1) "." counter(level2) ". ";
    }
    
    h3::before {
    counter-increment: level3;
    content: counter(level1) "." counter(level2) "." counter(level3) ". ";
    }

HTML:

<div class="level2">
    <div class="level3">
        <ol>
        <li><h1>Überschrift 1</h1>
            <ol>
            <li><h2>Lorem ipsum</h2>
                <ol>
                <li><h3>Lorem ipsum</h3></li>
                <li><h3>Lorem ipsum</h3></li>
                <li><h3>Lorem ipsum</h3></li>
                </ol>
            </li>
            <li><h2>Lorem ipsum</h2>
                <ol class="level3">
                <li><h3>Lorem ipsum</h3></li>
                <li><h3>Lorem ipsum</h3></li>
                <li><h3>Lorem ipsum</h3></li>
                </ol>
            </li>    
            <li><h2>Lorem ipsum</h2>
                <ol class="level3">
                <li><h3>Lorem ipsum</h3></li>
                <li><h3>Lorem ipsum</h3></li>
                <li><h3>Lorem ipsum</h3></li>
                </ol>
            </li>
            </ol>
        </li>
        <li><h1>Überschrift 2</h1></li>

        </li>
        </ol>
    </div>
</div>

Wichtig ist, die Zählung am Anfang einer neuen Unterliste wieder auf Null zurückzusetzen. Dies geschieht durch die Klasse level3.

Kennzeichnen, dass ein Link auf eine externe Seite führt bzw. content mit ::after

Zum Abschluss noch ein Beispiel für ein automatisch generiertes Zeichen, welches hinter einem bestimmten Inhalte (content) eingefügt wird. Typischerweise möchte man auf einer Website anzeigen, wenn ein Link auf einen andere Webseite (also ein externer Link) verweist. Dazu kann man über ::after einfach einen schräg nach oben gerichteten Pfeil hinter den Link setzen:

Pfeil hinter einem Link zur Kennzeichnung eines externen Links

CSS:

    a {
     text-decoration: none;
    }
    
    a[href^="http:"]::after {
     content: "\2197\00A0";  /* schräger Pfeil nach oben; http://de.wikipedia.org/wiki/Unicode-Block_Pfeile*/
    }

HTML:

<a href="http://www.irgendwo,de">www.irgendwo.de</a>

Der Pfeil wird hinter jedem Link, der mit "http:" (also auf eine externe Website verweist) beginnt eingefügt.

 

Kategorie

CSS