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:

Denkt dabei auch an eine Leerzeile an der entsprechenden Stelle.

Der HTML-Code müsste so aussehen:

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:

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!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.