CSS/Selektoren/Pseudoelement/before, after
Aus SELFHTML-Wiki
< CSS | Selektoren | Pseudoelement
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>
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.
- HTML/Tutorials/Links richtig gestalten
abbr-Element erzeugt. Der über diecontent-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 dasabbr-Element.