Mit den Pseudoelementen :before und :after ist es möglich, Inhalte wie Text oder Grafiken vor oder nach einem bestimmten Element einzufügen. Wie das funktioniert werde ich Dir nun zeigen.
Textcontent einfügen
Ich möchte beispielsweise vor Absatztexten, die eine bestimmte Klasse tragen, das Wort „Wichtig:“ einfügen. Dafür definiere ich folgendes in meiner CSS-Datei:
p.klasse:before {
content:"Wichtig: ";
}
Denkt dabei auch an eine Leerzeile an der entsprechenden Stelle.
Der HTML-Code müsste so aussehen:
<p class="klasse">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt</p>
Das Ergebnis wäre dann folgendes:
Wichtig: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
Bilder einfügen
Bilder vor einem bestimmten Inhalt einzufügen ist ebenfalls nicht besonders schwierig. Der CSS Code ist folgender:
p.klasse:before {
content:url(pfad_zum_bild.jpg);
padding-right:5px;
}
Padding-right sorgt in diesem Fall für den horizontalen Abstand von dem Bild zum Text.
Das Ergebnis bei selbigem HTML-Code:
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
Mit dem selben Prinzip könnte man mit dem Pseudoelement :after nach dem Inhalt Elemente einfügen.
Viel Spaß beim ausprobieren!
Super. Vielen Dank. Würde dies auch so ähnlich funktionieren, nur ohne
Content before? Also zum Beispiel die Modul- Überschrift H2 so stylen, dass die ersten beiden Wörter farbig erscheinen?
Bei der obigen Version mit Content before würden mir Wörter für die Suchmaschine fehlen…
Liebe Grüsse
Bettina
Hallo Bettina,
in diesem Fall könntest du ein Element um die Wörter bilden, die du farbig markieren möchtest und ihnen per Inline-CSS Stile zuweisen.
Zum Beispiel:
Ich hoffe, dass ich dir helfen konnte 🙂
Liebe Grüße,
Daniele
Toller Artikel. Danach habe ich lange gesucht. Gibt es auch eine Möglichkeit, die ersten ZWEI WÖRTER farbig zu gestalten?
LG
Liebe Bettina,
vielen Dank! Das farbige gestalten der Inhalte aus dem Pseudoelement ist natürlich möglich und gar nicht so schwierig. Das kannst du wie folgt:
p.klasse:before { content:"Wichtig: "; color: red; }Funktioniert natürlich auch, wenn es zwei Wörter sind 🙂
Liebe Grüße,
Daniele