Colorscheme

Schonmal Content mit CSS erstellt?

CSS ist den meisten nur bekannt als Layout-Formatierungsmittel, Farben und Strukuren können erstellt und schnell wieder verändert werden, doch die wenigsten wissen, das man mit CSS auch Inhalte ausgeben kann. Wie jetzt? Ganz einfach:

Wir haben eine simple Liste:
<ul>
<li>Eintrag 1</li>
<li>Eintrag 2</li>
<li>Eintrag 3</li>
<li>Eintrag 4</li>
</ul>

Was wir da erhalten, sieht ungefähr so aus:

  • Eintrag 1
  • Eintrag 2
  • Eintrag 3
  • Eintrag 4

Das ist natürlich wenig spektakulär. Ich könnte jetzt noch die Listenpunkte entfernen und durch andere Zeichen ersetzen, doch die Auswahl ist in HTML begrenzt, was wäre wenn ich ein anderes Zeichen, zum Beispiel ein Fragezeichen vor jedem Listeneintrag haben will? Mit Bildern? Könnte man machen, besser geht es aber mit der “content”-Eigenschaft von CSS, die man auf eigentlich jedes beliebige Element anwenden kann, vorausgesetzt man nutzt die Pseudoelemente “:before” und “:after“:

<style type="text/css">
li:before {
content: "\2300"
}
</style>

<ul>
<li>Eintrag 1</li>
<li>Eintrag 2</li>
<li>Eintrag 3</li>
<li>Eintrag 4</li>
</ul>

So sollte es dann aussehen:

?Eintrag 1
?Eintrag 2
?Eintrag 3
?Eintrag 4

Wir sind allerdings nicht auf Zeichen beschränkt, wir können sogar beliebigen Text ausgeben, einfach obige CSS-Definition durch folgende ersetzen:
<style type="text/css">
li:before {
content: "text "
}
</style>

text Eintrag 1
text Eintrag 2
text Eintrag 3
text Eintrag 4

Mit der Eigenschaft Content lassen sich Zeichenketten, Hochkommas, URLs oder Zähler ausgeben. Doch auch hier ist noch nicht Schluss, wer interesse an den weiterführenden Möglichkeiten von CSS hat sollte für den Einstieg mal einen Blick auf folgende Webseite werfen: http://www.mediaevent.de/css/generated.html

Viel Spass mit diesen neuen Erkenntnissen!

Update: Folgender Link dürfte für euch auch noch interessant sein: Content per CSS anzeigen

css, content, formatieren

Verwandte Artikel
  1. User optimierter Content - wie schreibt man qualitativen Content
  2. 8 Web 2.0 Photoshop-Design-Tutorials
  3. Guter Content = Nützlicher Content
  4. MySql Quickreferenz
  5. Eigenes Wordpress Template in wenigen Schritten - Schritt 3

am April 8, 2006 um 09:16 Uhr | in Allgemein | 2 Kommentare

1 Trackbacks/Pingbacks
  1. Pingback: CSS3 - was wird kommen » Webdesignblog on Juni 22, 2006

1 Kommentare
  1. Boris, April 8, 2006:

    Es wäre noch wichtig, darauf hinzuweisen, dass die Internet Explorer einschließlich 6.x diese »CSS-Pseudoelemente« grundsätzlich nicht beherrschen.

Tut mir leid, die Kommentarfunktion für diesen Beitrag ist geschlossen.