Mit den Pseudoelementen ::beforeund ::afterin CSS können Sie Inhalte auf einer Seite einfügen, ohne dass diese im HTML-Code enthalten sein müssen. Das Endergebnis befindet sich zwar nicht im DOM, wird jedoch auf der Seite so angezeigt, als ob dies der Fall wäre, und würde im Wesentlichen so aussehen:
div::before ( content: "before"; ) div::after ( content: "after"; ) before after Die einzigen Gründe, einen über den anderen zu verwenden, sind:
- Sie möchten, dass der generierte Inhalt positionell vor dem Elementinhalt steht.
- Der
::afterInhalt ist auch in der Quellreihenfolge "nach", sodass er über :: vor positioniert wird, wenn er auf natürliche Weise übereinander gestapelt wird.
Beachten Sie, dass sich der Inhalt noch in dem Element befindet, auf das sie angewendet werden. Die Benennung fühlt sich so an, als ob sie vor oder nach dem Element kommen könnten, aber es ist wirklich vor oder nach dem anderen Inhalt im Inneren.
Der Wert für den Inhalt kann sein:
- Eine Zeichenfolge:
content: "a string";- Sonderzeichen müssen speziell als Unicode-Entität codiert werden. Siehe die Glyphenseite. - Ein Bild: Inhalt: URL (/path/to/image.jpg.webp); - Das Bild wird mit den genauen Abmessungen eingefügt und kann nicht in der Größe geändert werden. Da Dinge wie Farbverläufe tatsächlich Bilder sind, kann ein Pseudoelement ein Farbverlauf sein.
- Nichts: Inhalt: “”; - Nützlich für Clearfix und das Einfügen von Bildern als Hintergrundbilder (stellen Sie Breite und Höhe ein und können die Größe sogar mit der Hintergrundgröße ändern).
- Ein Zähler:
content: counter(li);- Wirklich nützlich für das Stylen von Listen, bis: Marker kommt.
Beachten Sie, dass Sie kein HTML einfügen können (zumindest wird dies als HTML gerendert). content: "";
: vs ::
Jeder Browser, der den Doppelpunkt (: :) CSS3-Syntax unterstützt, unterstützt auch nur die (:) -Syntax, aber IE 8 unterstützt nur den Einzelpunkt. Daher wird empfohlen, für die beste Browserunterstützung nur den Einzelpunkt zu verwenden.
:: ist das neuere Format zur Unterscheidung von Pseudoinhalten von Pseudoselektoren. Wenn Sie keine IE 8-Unterstützung benötigen, können Sie den Doppelpunkt verwenden.
verbunden
- ::erste Linie
- ::erster Brief
- Pseudo-Klassenselektoren
Browser-Unterstützung
Kleine Probleme:
- Firefox 3.5- erlaubt keine absolute Positionierung von Pseudoelementen.
- In Opera 9.2 wird in diesem Pseudoelement immer ein Leerzeichen angezeigt, als wäre es
preText. - IE 8 unterstützt keinen Z-Index
| Chrom | Safari | Feuerfuchs | Oper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 2+ | 1.3+ | 3.5+ | 6+ | 8+ | Ja | Ja |