Advanced CSS - :before und :after

1. Jetzt wird es mal richtig interessant!

Mit diesen beiden Pseudoelementen kann man Inhalte vor oder nach einem Element einfügen. Wer jetzt fragt, was von den beiden wofür zuständig ist, der kriegt Dresche.

2. Das Prinzip

... ist pisselig einfach. Feinheiten gibt es nur bei Zeichenketten.


selektor:before {
  content: Zeichenkette;
  /* weitere Formatierungen */
}

3. Eigene Zeichenketten

... müssen immer in Anführungszeichen oder Hochkommata gesetzt werden. Also zum Beispiel so.


h2:hover:after { 
  content:' Dies ist eine Zeichenkette'; 
}
<h2>Einleitung</h2>
<!-- Browseranzeige -->
Einleitung Dies ist eine Zeichenkette

Zwei Hinweise

1. Das "Einhängen"

... geschieht innerhalb des ausgewählten HTML-Tags. Der String Dies ist eine Zeichenkette befindet sich im <h2>. Das seht ihr an der identischen Formatierung, wenn ihr im obigen Beispiel da nicht irgendwelche CSS-Anweisungen innerhalb des :after überschrieben habt.

2. HTML-Tags

... werden als stinknormale Zeichen angesehen und nicht als das, was man damit beabsichtigt. Das könnt ihr am folgenden Beispiel sehen.


h2:hover:after { 
  content:' <p>Dies ist eine Zeichenkette</p>'; 
}
<h2>Einleitung</h2>
<!-- Browseranzeige -->
Einleitung <p>Dies ist eine Zeichenkette</p>

4. Attributwerte

Auch auf die kann man zugreifen und ausgeben. Ob das jetzt nun sinnvoll oder nicht ist, sei dahin gestellt. Dabei gibt es einfach gesagt zwei Möglichkeiten.

Über den Selektor


h2:before {
  content: attr(id); 
}
<h2 id="blubb">Mein Zwiti</h2>
<!-- Browseranzeige -->
blubbMein Zwiti

Hier könnt ihr unter Anderem sehen, dass man bei der content-Angabe auch Leerzeichen mittels Anführungszeichen oder Hochkommata berücksichtigen sollte.

Über ein Attribut


*[title]:before {
  content: ' 'attr(id); 
}
<h2 title="blubb">Mein Zwiti</h2>
<p title="blubber">Mein Text</hp>
<!-- Browseranzeige -->
blubb Mein Zwiti
blubber Mein Text

In diesem Fall gilt die Anweisung für alle Elemente, die über ein title-Attribut verfügen.

5. Besonderheiten

Wie ich schon sagte, können die eingehängten Inhalte in keinster Weise mit HTML ausgezeichnet werden. Auch bei den CSS-Anweisungen gibt es ein paar Regeln.

Man kann die Inhalte nicht fest positionieren
Bilder können per content: url(...) eingebunden werden
Bei Block-Elementen sind bei display: alle Angaben erlaubt
Bei Inline-Elementen sind dagegen nur none und inline gestattet

6. Und was soll das Buhei?

Einige werden sich jetzt fragen, wozu man das überhaupt benutzen kann. Nun, zum einem lassen sich damit auf elegante Art und Weise die üblichen Float-Probleme umgehen. Außerdem gibt es da noch ein paar sehr interessante Anwendungsmöglichkeiten, die euch jetzt zeige.

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt