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