Dinge, die Sie nicht über die CSS-Pseudoelemente ::before und ::after wissen

CSS hat zwei Pseudoklassen, die nicht häufig verwendet werden: before und :after. Sie werden gelegentlich verwendet, um benutzerdefinierte Formatierungen hinzuzufügen, aber ihre Funktionen sind nicht darauf beschränkt. Vor ein paar Tagen habe ich Creative Link Effects gefunden, eine sehr interessante Seite, die kreative Link-Effekte vorstellt. Die erstaunlichen Effekte darin verwenden viele Funktionen, zusätzlich zum Transform-Attribut für die Verformung die beiden Pseudoelemente, die ich als nächstes vorstellen werde.

Kreative Schaltflächenstile

Eine grundlegende Grammatik

Bevor wir uns mit fortgeschrittenen Anwendungen befassen, wollen wir zunächst die Grammatikregeln verstehen. Wenn Sie diese beiden Pseudoelemente nur zum Hinzufügen einiger benutzerdefinierter Zeichen benötigen, verwenden Sie normalerweise einfach die von Pseudoklassen verwendete Einzeldoppelpunktnotation, um die Browserkompatibilität sicherzustellen:

In CSS3 werden jedoch doppelte Doppelpunkte verwendet, um Pseudoelemente von Pseudoklassen zu unterscheiden. Wenn also Attribute wie display oder width verwendet werden, damit das display vom ursprünglichen Element getrennt wird, ist es laut Standard empfehlenswert, diese in doppelten Doppelpunkten zu schreiben. Bei älteren Browsern kann es zu Supportproblemen kommen, aber Pseudoelemente werden meistens mit CSS3 verwendet, sodass die Abwärtskompatibilität kein großes Problem darstellt:

Das für diese beiden Pseudoklassen eindeutige Inhaltsattribut wird verwendet, um beim CSS-Rendering dem logischen Kopf oder Ende des Elements Inhalt hinzuzufügen. Beachten Sie, dass diese Ergänzungen den Dokumentinhalt nicht ändern, nicht im DOM erscheinen, nicht replizierbar sind und nur der CSS-Rendering-Ebene hinzugefügt werden. Sinnvoller sind folgende Werte:

•[Zeichenfolge] – Wenn Sie eine Zeichenfolge in Anführungszeichen setzen, wird die Zeichenfolge dem Elementinhalt hinzugefügt. Beispiel:

Zweite fortgeschrittene Fähigkeiten

Das Löschen von Floats ist ein häufig auftretendes Problem. Viele Leute lösen es, indem sie ein leeres Div hinzufügen und das Attribut clear:both; anwenden. Anstatt bedeutungslose Elemente hinzuzufügen, benötigen Sie nun nur noch die folgenden Stile, um den Float am Ende des Elements automatisch zu löschen:

Viele Leute fügen gerne große Anführungszeichen als Hintergrund für das Blockzitat hinzu. In diesem Fall können wir :before anstelle von background verwenden, wodurch Platz für den Hintergrund bleibt und Text anstelle von Bildern verwendet werden kann:

Drei Spezialeffekte

Zusätzlich zum einfachen Hinzufügen von Zeichen ist es mit den leistungsstarken Positionierungs- und Spezialeffektfunktionen von CSS durchaus möglich, einfachen Elementen bis zu zwei Container hinzuzufügen. Zu beachten ist: Wenn Sie den Inhalt nicht benötigen und das Stilattribut nur zur Erzeugung eines Effekts verwenden möchten, darf das Inhaltsattribut nicht leer sein, d. h. Inhalt:““. Andernfalls werden andere Stilattribute nicht wirksam.

Beim Hovern erscheinen eckige Klammern

Bewegen Sie die Maus über den Link und es erscheinen eckige Klammern:

In ähnlicher Weise müssen wir nur display: block und position: absolute verwenden, um es als zwei Container zu behandeln und sie zu kombinieren, um beim Anhalten einen Doppelrahmeneffekt zu erzeugen:

Der obige Artikel über die unbekannte Verwendung von CSS-Pseudoelementen ::before und ::after ist der gesamte Inhalt, den der Editor mit Ihnen teilt. Ich hoffe, er kann Ihnen als Referenz dienen. Ich hoffe auch, dass Sie 123WORDPRESS.COM unterstützen werden.

Original-URL: http://www.cnblogs.com/androidshouce/archive/2016/06/12/5576493.html