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.

Newsletter abonnieren

Abonniere unseren kostenlosen Newsletter und wir informieren Dich regelmäßig über neue, spannende Artikel im Bereich Webentwicklung, die Programmierung von Mobile Apps, SEO und mehr!

Wir halten deine Daten privat und teilen sie nur mit Dritten, die diesen Dienst ermöglichen. Lies unsere Datenschutzerklärung.
Kostenloser Newsletter

Bleibe auf dem Laufenden!

Wir informieren Dich regelmäßig über neue, spannende Artikel im Bereich Webentwicklung, Programmierung von Mobile Apps, SEO und mehr!

Wir halten deine Daten privat und teilen sie nur mit Dritten, die diesen Dienst ermöglichen. Lies unsere Datenschutzerklärung.