Generated Content
Eine der Highlights der CSS-Spezifikation ist für mich generated content. Damit wird es möglich Text aber auch Bilder hinzuzufügen, die eher Design, der Lesbarkeit u.ä. dienen, aber keinen inhaltlichen Charakter haben und daher auch nicht ins Markup gehören. Alle modernen Browser beherrschen diesen Standard, der Internet Explorer seit der Version 8.
Natürlich lassen sich darüber auch die beliebten Liststyle-Symbole einfügen, kleine Grafiken, häufig auch via Sprites. Wenig bekannt und genutzt sind Unicode-Charakter. So fügt
a.email:before{position:absolute; top:0; left:-25px; content:"\002709 \0000A0"}einen ✉ (envelope) vor die E-Mail-Adresse ein. Das Unicodezeichen 2709 (Suchtipp: U+2709) ist der Umschlag, das Zeichen danach ein Leerzeichen.
Es gibt Wikipediaseiten, die einen guten Einstieg ermöglichen. Ein bisschen Vorsicht ist bei der Entwicklung für mobile Seiten geboten. Einige Androidfonts unterstützen den Briefumschlag nicht.
Die Unicode-Symbole haben gegenüber den Bildern nicht nur den Vorteil, dass kein Request nötig ist, sondern das sie auch bei der Skalierung der Seiten ihre Wirkung nicht verlieren.
Viel Spass, bei eigenen Experimenten. Wie wäre es z.B. mit U+2263 in Verbindung mit einer border?
Eine gewisse Dynamik beim eingefügten Content ermöglicht die Nutzung von Attributen.
h1:after{content: ""attr(title)"";} In diesem Fall wird davon ausgegangen, dass das h1-Element einen title hat. In HTML5 könnte man auch data-text als Attribute verwenden. Was damit möglich ist, zeigt folgendes Beispiel einer
geschrieben von Pawel