CSS/Selektoren/Pseudoelement/before, after

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
  • CSS 2.0
  • Chrome
  • Firefox
  • IE 8
  • Opera
  • Safari

Die Pseudoelemente ::before und ::after erzeugen ein beliebig formatierbares Element, das innerhalb des angesprochenen Elements vor bzw. nach dem tatsächlich vorhandenen Inhalt eingefügt wird. Der Inhalt dieser Elemente kann mit den Eigenschaften für generierte Inhalte erzeugt werden.

Beispiel ansehen …
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Beispiel für die before- und after-Pseudoelemente</title> <style> abbr {background-color: lightgreen;} abbr::before, abbr::after {content: '*';} </style> </head> <body> <p>Der Begriff <abbr>CSS</abbr> ist eine Abkürzung.</p> </body> </html>
In diesem Beispiel werden die Pseudoelemente für das abbr-Element erzeugt. Der über die content-Eigenschaft definierte Inhalt wird sowohl vor als auch nach dem Inhalt des Elements eingefügt. Da die Pseudoelemente innerhalb des angesprochenen Elements erzeugt werden, besitzen die Sternchen dieselbe Hintergrundfarbe wie das abbr-Element.

Die von diesen Selektoren erzeugten Elemente können beliebig formatiert werden. Wie bei normalen Elementen gelten für die einzelnen Eigenschaften die Standardwerte. Ausnahme bilden Eigenschaften, die vererbt werden, z.B. Schriftformatierungen.

Beachten Sie: Der Internet Explorer kennt in Version 8 nur die Schreibweise mit einfachem Doppelpunkt (:before bzw. :after). Des Weiteren ist die Darstellung folgender display-Werte fehlerhaft: list-item, table-caption, table-row-group, table-header-group, table-footer-group, table-row und table-cell.

Siehe auch[Bearbeiten]

  • CSS-Eigenschaft: content (Inhalte für Pseudoelemente erzeugen)
  • CSS-Eigenschaft: counter-increment (Elemente mit Hilfe von CSS-Zählern durchnummerieren)
  • Clearfix (Clearance eines Floats mit dem Pseudoelement ::after)
  • Mithilfe der attr-Funktion Attributwerte auslesen und mittels content in einem Pseudoelement ausgeben.