DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Die Pseudo-Elemente ::before und ::after in CSS ermöglichen es Ihnen, Inhalt auf einer Seite einzufügen, ohne dass dieser im HTML vorhanden sein muss. Obwohl das Endergebnis nicht wirklich im DOM ist, erscheint es auf der Seite so, als wäre es das, und würde im Wesentlichen so aussehen
div::before {
content: "before";
}
div::after {
content: "after";
}<div>
before
<!-- Rest of stuff inside the div -->
after
</div>Die einzigen Gründe, das eine dem anderen vorzuziehen, sind
- Sie möchten, dass der generierte Inhalt positionell vor dem Elementinhalt erscheint.
- Der
::after-Inhalt ist auch in der Quellreihenfolge "nach", sodass er sich natürlich über ::before positioniert, wenn sie übereinander gestapelt sind.
Beachten Sie, dass der Inhalt immer noch innerhalb des Elements ist, auf das sie angewendet werden. Die Benennung vermittelt den Eindruck, als kämen sie, nun ja, vor oder nach dem Element, aber es ist wirklich vor oder nach dem anderen Inhalt im Inneren.
Der Wert für content kann sein
- Eine Zeichenkette:
content: "a string";— Sonderzeichen müssen speziell als Unicode-Entität kodiert werden. Siehe die Seite über Glyphen. - Ein Bild:
content: url(/path/to/image.jpg);— Das Bild wird in seinen genauen Abmessungen eingefügt und kann nicht in der Größe geändert werden. Da Dinge wie Verläufe eigentlich Bilder sind, kann ein Pseudo-Element ein Verlauf sein. - Nichts:
content: "";— Nützlich für Clearfixes und das Einfügen von Bildern alsbackground-image(setzen Siewidthundheight, und können sogar mitbackground-sizein der Größe geändert werden). - Ein Zähler:
content: counter(li);— Wirklich nützlich zum Formatieren von Listen (aber wir haben auch::markerdafür). - Ein Zeilenumbruch:
content: "Killing \A Me \A Softly";— Großartig, wenn Sie wirklich einen brauchen.
Beachten Sie, dass Sie HTML-Entitäten in die content-Eigenschaft einfügen können, aber diese werden nicht gerendert oder Ähnliches.
content: "<h1>I will not render as a Heading 1</h1>";: vs ::
Jeder Browser, der die Doppelpunkt-Syntax (::) von CSS3 unterstützt, unterstützt auch einfach die (:) Syntax, aber Internet Explorer (IE) 8 unterstützt nur den Einzelpunkt, daher wird derzeit empfohlen, einfach den Einzelpunkt für die beste Browserunterstützung zu verwenden.
:: ist das neuere Format, das Pseudo-Inhalt von Pseudo-Selektoren unterscheiden soll. Wenn Sie IE 8-Unterstützung nicht benötigen, können Sie gerne den Doppelpunkt verwenden.
Browser-Unterstützung
Diese Browser-Unterstützungsdaten stammen von Caniuse, das mehr Details enthält. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 4 | 2 | 9 | 12 | 3.1 |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 127 | 127 | 2.1 | 3.2 |
Noch einmal, was machen die 'Before'- und 'After'-Elemente?
Überprüfen Sie den Abschnitt „Weitere Ressourcen“. Der erste Link selbst lautet „Eine ganze Reihe cooler Dinge, die sie tun können.“
Ich bin ungefähr 3 Jahre zu spät, aber trotzdem –
Sie fügen einfach Inhalte vor oder nach bestimmten Elementen hinzu.
Nehmen wir an, ich möchte nach jedem Element ein Fragezeichen ( ? ) hinzufügen.
Ich würde es so stylen
Würde die folgende Ausgabe ergeben
Turn down for what?So einfach ist das! ;)
„Aber warum sich die Mühe machen, sie zu verwenden?“, fragen Sie vielleicht.
Abgesehen von den offensichtlichen Gründen der Aufwandsersparnis werden diese verwendet, um einige coole CSS-Tricks zu implementieren!
Schauen Sie sich das Band unten hier an: http://cybernext.in
Pures CSS, mein Freund! Die gefalteten Ecken des Bandes verwenden die Pseudo-Elemente ::before und ::after.
Weitere Informationen finden Sie hier: https://css-tricks.de/snippets/css/ribbon/
Ich denke, Sie kannten die Bedeutung von :before & :after bereits.
Das ist etwas, das mich interessiert (:before und :after).
Aber Sie haben den abgeschnittenen Sprite aus dem Video beibehalten.
Hallo Lehrer
Kann ich HTML-Tags innerhalb von before und after schreiben?
Android-Unterstützung?
Das mag eine alberne Frage sein, aber ich bin verwirrt über die Verwendung von 2 Doppelpunkten zur Definition eines Pseudo-Elements.
d.h.
div:after {}
vs.
div::after {}
Ich habe viele Ressourcen im Internet (und Artikel auf dieser Website) gesehen, die einen einzelnen Doppelpunkt verwenden, aber es scheint, dass einige „neuere“ Referenzen doppelte Doppelpunkte verwenden. Im praktischen Einsatz (zumindest was IE betrifft, insbesondere IE8) ist der Doppelpunkt nicht kompatibel, aber die Verwendung des Einzelpunkts funktioniert in IE8 und allen neueren Browsern (zumindest denen, die ich getestet habe). Wenn also ein Einzelpunkt funktioniert, warum sollte ich jemals Doppelpunkte verwenden?
Kann mir also jemand den Grund für die Verwendung der doppelten Doppelpunkte erklären?
Ups... ich hätte den obigen Artikel vollständig lesen sollen, der zusammenfasst, dass IE8 die Verwendung von Doppelpunkten nicht unterstützt und empfiehlt, vorerst Einzelpunkte für die beste Browserunterstützung zu verwenden... das beantwortet im Grunde meine Frage. Danke.
Es ist überhaupt nicht dumm. In allen CSS-Versionen bis einschließlich CSS 2.1 gab es keine Möglichkeit, zwischen Pseudo-Klasse und Pseudo-Element zu unterscheiden.
Ich bin immer noch ein Webentwickler-Anfänger, und obwohl ich jetzt viel mehr weiß als zu Beginn, ist es immer noch manchmal verwirrend, richtig zu unterscheiden, was Pseudo-Element und was Pseudo-Klasse ist. Das Problem teilen, glaube ich, viele von uns immer noch.
Es ist so viel einfacher, sich zu merken, dass die Syntax mit zwei Doppelpunkten (::) Pseudo-Element bedeutet und die Syntax mit einem Doppelpunkt (:) Pseudo-Klasse bedeutet. Es ist kein Raten mehr nötig.
Es dient der Semantik und einem besseren Verständnis des Codes. Doppelpunkte sind für Pseudo-Elemente wie ::first-line, ::-vendor-scrollbar und ein einzelner Doppelpunkt ist für Pseudo-Klassen wie :hover,** :active**
Ist das nicht ein Beispiel für ::before statt ::after?
hi
— Rest des Inhalts im div —
Das ist es. Hier ist ein CodePen, der es zeigt.
In diesem speziellen Fall ist es kein Beispiel für das Pseudo-Element ::before. Lassen Sie es mich erklären
Pseudo-Element generiert ein virtuelles Element als letztes Kindelement innerhalb des gezielten Elements. Falls Sie es nicht wussten, ist jeder Buchstabe in einem Element in einer Art virtuellem Element namens line box enthalten. In diesem Fall war das <div>-Element leer (kein Text, keine Zeilenbox), und als das Pseudo-Element ::after erstellt wurde, war sein Inhalt „hi“ String (generiert durch die content-Eigenschaft) das Einzige innerhalb dieses <div>-Elements, und das ist die kleine Illusion, die Sie verwirrt.
Wenn Sie beispielsweise Text in dieses <div>-Element einfügen, wird dieser „hi“-String als letzter Inhalt in diesem Element angezeigt.
Ich hoffe, das hilft, die Dinge für Sie zumindest ein wenig zu klären.
Ich möchte after und before lernen.
Wie lerne ich after und before?
Bitte, ich will die Lösung
after before
Würde jemand :before oder :after im Tag verwenden, um einen Seiten-Header und -Footer zu generieren? Ist es semantisch korrekt, ein Pseudo-Element auf den Tag anzuwenden?
Beispiel
Ich glaube nicht, denn der Inhalt des Pseudo-Elements ist nicht im DOM (kann nicht einmal ausgewählt werden), daher existiert er nur visuell für die Benutzer visueller Browser, und das schließt Screenreader und Webcrawler aus, was keine gute Praxis ist.
Die Betonung liegt auf mir. Quelle: MDN Docs
Sind die HTML-Beispiele für ::after und ::before nicht vertauscht?
hi
— Rest des Inhalts im div —
muss geändert werden zu
— Rest des Inhalts im div —
hi
Heute habe ich diese Informationen verwendet, um ein gemeinsames Lade-Overlay für Webanwendungen zu erstellen
https://gist.github.com/tracend/8553152
Danke!
Das ist cool, aber was ist der > Unterschied zwischen ihnen
Vielen Dank für die Erklärung des Unterschieds zwischen : und :
Einfach und Perfekt
Ich glaube nicht, dass es im Android-Standardbrowser funktioniert :(.. Irgendeine Lösung?
Vielen Dank für die Klarstellung zur Verwendung von Doppelpunkten im Vergleich zur Nichtverwendung. Ich hatte anderswo gelesen, dass man sie nicht verwenden soll, was mich ein wenig frustriert hat, da ich dachte, sie seien visuell hilfreich im Code.
Ich verstehe, warum die Leute sagten, man solle sie nicht verwenden (aus Kompatibilitätsgründen mit älteren IE-Versionen), aber meine Tage des Designs unter Berücksichtigung von Legacy-IE-Versionen sind vorbei, also von nun an nur noch Doppelpunkte!
Ich möchte after und before lernen.
Wie lerne ich after und before?
Bitte, ich will die Lösung
HI alle, ich muss einen Hintergrund geben. Aber das Hauptproblem ist, dass der Hintergrund von links nach rechts angewendet werden soll und wenn er zur rechten Seite kommt, soll die Höhe des Hintergrunds abnehmen... wie kann ich das in CSS3 anwenden?
Belebung dieses Threads – ist es möglich, ein Pseudo-Element auf :after content anzuwenden? Zum Beispiel, wenn Sie :first-letter auf eine saubere CSS-Weise anwenden möchten, anstatt es mit einer Art gezielter JS-String-Analyse zu hacken.
Ich verwende das before-Tag für einen Absatz. Ich verwende ein Bild in diesem before-Tag. Wie kann ich die Höhe und Breite dieses Bildes festlegen?
Sie haben die
attr-Funktion vergessen, mit der Sie Dinge tun können wieDas Inhaltsbild kann in der Größe geändert werden.
Welchen Vorteil hat die Verwendung von ::after/::before gegenüber der Verwendung von JQuery? Es fällt mir schwer, mir ein Szenario vorzustellen, in dem ich das nicht einfach in jQuery machen würde.
Abgesehen von den offensichtlichen Gründen, dass Sie "native" Implementierungen verwenden (was Ihnen ein besseres Verständnis dafür vermittelt, was Sie tatsächlich tun), ist die Verwendung eines CSS-Pseudo-Elements schneller als die Verwendung von JavaScript. DOM-Manipulation ist sehr teuer.
Tolle Antwort, danke!
Großartig. Ich wollte dieses "after before"-Ding schon lange lernen, habe es aber erst heute gelernt, als ich in etwas stecken blieb, das dieses Wissen erfordert, um fortzufahren. Ich wollte Kopfzeilendekorationen für zwei meiner Projekte codieren ( lotterywale und punjabstatelottery)
Ich hoffe, ich werde in der Lage sein, das erfolgreich zu codieren. Andernfalls werde ich hier um Hilfe bitten.
Vielen Dank,
Amitoj
Ist es möglich, die Pseudo-Elemente innerhalb einer Klasse zu verwenden?
z.B.
.className li::before {
}
Danke
Was ist die Verwendung des after before Elements im CSS-Selektor?
Es tut mir leid, aber was ist der Unterschied zwischen dem Einfügen der CSS-Eigenschaften in die Klasse mit dem After-Selektor (.example:after{position:absolute;}) und dem einfachen Einfügen in die Klasse selbst (.example{position:absolute;})? Ich verstehe das Konzept dahinter nicht ganz.
Es ist ziemlich verwirrend, aber es gibt tatsächlich einen Unterschied. Sowohl
::beforeals auch::afterwerden Pseudo-Elemente genannt, weil sie an sich Elemente sind, die sich von dem Element, an das sie angehängt sind, unterscheiden, aber direkt damit in Beziehung stehen.Mit anderen Worten,
.my-class::afterist so etwas wie ein Element wie.my-classund kann getrennt davon gestaltet werden. Chris hat einen alten, aber guten Artikel darüber, wie sie funktionieren und welche interessanten Dinge man damit machen kann: https://css-tricks.de/pseudo-element-roundup/es funktioniert nicht mit dem
TagFunktioniert es damit?
Ja, das tut es. So etwas wie das hier
a::before {content: "";
/* other properties */
}
*,
*:before,
*:after {
}
was bedeutet das?
Es wählt die Pseudo-Elemente before/after für ALLE Elemente aus. Das * bedeutet „jedes Tag“.
Wo ist ::selection?
Das funktioniert nicht
body :not(i, [class=-icon], [class*=dashicons], ::before, ::after)
font-family: $font-family !important
…aber das funktioniert
body :not(i, [class=-icon], [class=dashicons]),
body:not()::before,
body:not(*)::after
font-family: $font-family !important
Bitte fügen Sie es Ihrem Artikel hinzu, da es keinen Artikel zu diesem Thema gibt.