Inhalte per CSS mittels Pseudoelement einfügen
Des Öfteren bin darauf angesprochen worden, wie ich die Kennzeichnung (Autorin) hinter meinem Namen in den Kommentaren auf pixelgraphix ausgebe, das sie nicht im Quelltext erscheint. Ich verwende dafür das Pseudoelement :after im Stylesheet.
Mit Pseudoelementen und Pseudoklassen lassen sich Bestandteile von HTML-Elementen näher definieren, also z.B. ein besuchter (:visited) oder ein mit der Maus überfahrener (:hover) Link. Sie werden dem zu definierenden Element nachgestellt (a:visited).
Die Pseudoelemente :before und :after können dazu verwendet werden, vor (:before) bzw. nach (:after) einem Element einen beliebigen Inhalt einzufügen. Das können Grafiken oder Texte sein. Was vor bzw. nach dem Element eingefügt werden soll, wird in einer geschweiften Klammer dargestellt { content: " ";}.
Also zum Beispiel:
p.autor:before { content: "Geschrieben von ";}Oder in meinem Falle:
#right div.manu p.autor strong:after { content: " (Autorin)";}Bei der Verwendung ist zu beachten, dass der Internet Explorer 6 als aktueller Browser mit diesen Formatierungen nicht umgehen kann. Auch werden die Angaben, wie gesagt, nicht in den Quelltext geschrieben und sollten somit keine «wichtigen» Informationen tragen.
Weiterführende Informationen bei SELFHTML.
Werbeunterbrechung
Kommentare und Feedback (9)
Vorheriger Artikel: Wie bin ich hier gelandet?, nächster Artikel: Website Design in Bildern
16.12.2005, 02:00
Ist zwar ganz schön und gut, aber warum sollte man Medien ohne CSS-Support Inhalte vorentahlten?
16.12.2005, 02:14
Wer mit engen Redaktionssystemen arbeitet, die nicht vollends konfigurierbar sind, ist sehr froh, eine solche Möglichkeit zu haben.
Die von mir im Beispiel gewählte Kennzeichnung stellt einen Zusatz dar, ebenso wie ich auch Hintergrundbilder oder Rahmen verwende. Diese zusätzlichen Informationen sind zum Verständnis unntötig, dienen der Orientierung des Auges und sollten z.B. einem Palm auch nicht undbedingt mitgegeben werden.
16.12.2005, 03:24
Solange man keine relevanten Inhalte mit CSS transportiert ist das ja dann ok.
16.12.2005, 04:45
Wie machst du das für den IE? Ich hab mich auch schon damit auseinandergesetzt und bisher keine Alternative zu meiner Phpvariante gefunden.
16.12.2005, 05:02
Ich hatte einen Link vergessen hiermit wird er nachgereicht..
16.12.2005, 07:08
Es gab mal früher eine sehr coole Pseudoklasse, die jetzt aber im aktuellen Working Draft wohl wieder weg zu sein scheint :-( Content pseudo-class warum sie weg ist konnte ich noch nicht herausfinden. Ansonsten hätte man nämlich schön einfach so etwas machen können:
p strong:contains(“Manuela”):after { content: “ (Autorin)”; }
Ok ich lese gerade dass der Grund für den Wegfall fehlende implementierung ist, wenn sich also genügend beschweeren baut es vieleicht einer ein und es wird wieder aufgenommen ;-)
Wobei man natürlich auch diskutieren sollte ob eine solche Pseudoklasse denn überhaupt sinnvoll ist, was ich selbst noch nicht ganz überblicken kann.
16.12.2005, 07:24
@Knut: Ich lasse den IE außen vor. Da es sich um ein Extra handelt, muss ich es nicht auf allen Konfigurationen unterstützen. Wer mit dem IE kommt, muss halt drauf verzichten. Ich weise ja häufig genug drauf hin, dass es bessere Browser gibt ;-).
@Jeena: Das wäre natürlich eine feine Sache gewesen. Weniger umständlich. Auch wenn ich Dir natürlich Recht gebe darin, dass Sinn und Unsinn zu diskutieren wären. Manchmal macht es halt einfach Spaß. Sinn hin oder her ;-).
19.12.2005, 04:37
Es widerspricht ein bisschen dem Prinzip der Trennung von Content und Formatierung. Fur Gimmicks würde ich es verwenden, oder als Notbehelf, wenn ein CMS zickt, aber nicht für wichtige Inhalte.
26.12.2005, 12:16
Nur mal so eine Frage… aber mit dem System müßte man dann doch eigentlich auch kompletten HTML-Code einfügen können, oder? Also z.B. zusätzliche Elemente für z.B. blockquote per before und after einfügen, so daß man dann für jedes der Elemente z.B. runde Ecken als Hintergrund definieren kann, im zu schreibenden Inhalt aber nur einmal <blockquote></blockquote> stehen hat? Das muß ich bei Gelegenheit mal probieren…