CSSs ::before und ::after Pseudoelementen ermöglichen es Ihnen, dass Sie alle Nicht-Ersatzelemente verwenden (z. B. sind sie für geeignet<div> Aber nicht anwendbar<code><img alt="7 Praktische Verwendungen für die :: vor und :: nach Pseudoelementen in CSS" > ) Vor und nachher "Inhalt" einfügen. Auf diese Weise können Sie Inhalte auf einer Webseite anzeigen, die möglicherweise in HTML -Inhalten möglicherweise nicht vorhanden ist. Sie sollten es nicht für tatsächliche Inhalte verwenden, da es in Bezug auf die Zugänglichkeit nicht so gut ist, da Sie nicht einmal Text auswählen und kopieren können, der auf diese Weise auf der Seite eingefügt wird - es ist nur dekorative Inhalte. In diesem Artikel werde ich Sie durch sieben verschiedene Beispiele führen, die zeigen, wie Sie interessante Effekte mit ::before und ::after erzeugen können.
Beachten Sie, dass ich für die meisten Beispiele nur die Codeabschnitte erläutere, die besonders für die CSS-Pseudoelemente relevant sind. Das heißt, wenn Sie andere Codestile sehen möchten, sind alle CSS in der eingebetteten Demo enthalten.
Wenn Benutzer Ihre Website besuchen, kann die Internetverbindung (oder Faktoren, die über Ihre Kontrolle hinausgehen), möglicherweise verhindern, dass Ihr Bild heruntergeladen wird, sodass der Browser beschädigte Bildsymbole und alternativen Text für das Bild angezeigt wird (falls vorhanden).
Wie benutze ich stattdessen benutzerdefinierte Platzhalter? Sie können dies mit ::before und ::after und einigen CSS -Positionierung tun.
Zunächst müssen wir die relative Positionierung zu Bildelementen verwenden. Wir werden eine absolute Positionierung zu einem der Pseudoelemente später verwenden, sodass diese relative Position sicherstellt, dass sich das Pseudoelement innerhalb des Inhalts des Bildelements befindet, anstatt vollständig aus dem Dokumentstrom herauszukommen.
img {
Anzeige: Block;
Position: Relativ;
Breite: 100%;
} Lassen Sie uns als nächstes das ::before Pseudoelement des Bildes verwenden, um einen Bereich zu erstellen, der den Bildeffekt verfälscht. Wir werden es zuerst mit einem hellgrauen Hintergrund und einem etwas dunkleren Rand stylen.
img :: vor {
Hintergrundfarbe: HSL (0, 0%, 93,3%);
Grenze: 1PX gestrichelt HSL (0, 0%, 66,7%);
/ * ... */
}<img alt="7 Praktische Verwendungen für die :: vor und :: nach Pseudoelementen in CSS" > ist ein Ersatzelement. Warum verwenden ::before Pseudo-Element darauf? Es funktioniert nicht! richtig. In diesem Fall wird das Pseudoelement in Chrom und Firefox angezeigt, wenn das Bild nicht geladen wird, genau das, was Sie wollen. In der Zwischenzeit zeigt Safari nur die auf alternativen Text angewendeten Stile an.
Der Stil gilt für die obere linke Ecke des beschädigten Bildes.
Bisher lief alles gut. Jetzt können wir es auf ein Element auf Blockebene ( display: block ) einstellen und ihm eine Höhe geben, um den gesamten verfügbaren Platz zu füllen.
img :: vor {
/ * ... */
Anzeige: Block;
Höhe: 100%;
}Wir können den Stil weiter verbessern. Lassen Sie uns zum Beispiel die Ecken umrunden. Wir sollten auch Platz für den alternativen Text hinterlassen, indem wir die vollständige Breite und die absolute Positionierung für Pseudoelemente bereitstellen, um die Platzierung des Inhalts, wo wir es wollen, besser zu steuern.
img :: vor {
/ * ... */
Border-Radius: 4px;
Inhalt: "";
Position: absolut;
Breite: 100%;
}Wenn Sie hier anhalten und Ihre Arbeit überprüfen, können Sie sich am Kopf kratzen, da der alternative Text plötzlich verschwindet.
Dies liegt daran, dass wir content auf eine leere Zeichenfolge festlegen (wir müssen die von uns generierten Inhalte und Stile anzeigen) und den gesamten Speicherplatz, einschließlich des tatsächlichen alternativen Textes, überschreiben. Es ist da, wir können es einfach nicht sehen.
Wir können den alternativen Text durch Substitution (Get It?), Diesmal mit Hilfe des ::after pseudoelement anzeigen. content kann attr() verwenden, um alt -Attributtext des Bildes anzuzeigen:
img :: nach {
Inhalt: Attr (Alt);
/*Einige einfache Stile*////
Schriftgewicht: fett;
Position: absolut;
Höhe: 100%;
links: 0px;
Text-Align: Mitte;
Oben: 1PX;
Breite: 100%;
}Das ist großartig! Zumindest in Chrom.
Dies ist jedoch bei Firefox nicht der Fall.
Eine schnelle Problemumgehung besteht darin, den Eigenschaftsselector (in diesem Fall img[alt] ) zu verwenden, um das alt -Attribut direkt zu lokalisieren und ähnliche Stile dort zu positionieren, um Chrome zu entsprechen.
IMG [Alt] {
Text-Align: Mitte;
Schriftgewicht: fett;
Farbe: HSL (0, 0%, 60%);
}Jetzt haben wir einen ausgezeichneten Platzhalter in Chrom und Firefox.
Blockzitate sind Zitate oder Auszüge aus Werken. Sie bieten auch eine sehr gute Gelegenheit, eine Textwand mit visuell interessanten Inhalten zu brechen.
Es gibt verschiedene Möglichkeiten, Blockreferenzen zu stylen. Chris hat ein Fünf-Stil-Set, das bis 2007 zurückreicht.
Ich möchte mir eine andere Technik ansehen, die sich kombiniert ::before und ::after . Wie wir im vorherigen Beispiel gesehen haben, können wir content Inhaltseigenschaft verwenden, um den generierten Inhalt anzuzeigen und andere Eigenschaften anzuwenden, um sie zu dekorieren. Lassen Sie uns zu Beginn und am Ende der Blockreferenz große Zitate geben.
HTML ist einfach:
<blockquote> </blockquote>
Einige Dekorationen in CSS:
Blockquote {
Schriftstil: kursiv;
Zeilenhöhe: 1.618;
Schriftgröße: 1.2EM;
Breite: 30em;
Position: Relativ;
Polsterung: 40px 80px;
} Beachten Sie position: relative darin, denn wie Sie lernen werden, ist es für die Positionierung von Blockreferenzen von entscheidender Bedeutung.
Wie Sie vielleicht erraten haben, werden wir ::before für das erste Zitat und ::after dem Endzitat verwenden. Jetzt können wir einfach content Inhaltseigenschaft auf beiden aufrufen und das Tag darin generieren. CSS liefert uns jedoch mit offenen Werten mit open-quote und close-quote .
Blockquote :: vor {
Inhalt: Open-Quote;
/*Platzieren Sie es in die obere linke Ecke*/
Top: 0;
links: 0;
}
Blockquote :: nach {
Inhalt: Nahquote;
/*Platzieren Sie es in die untere rechte Ecke*/
unten: 0;
Rechts: 0;
}Dies gibt uns die Zitate, die wir wollen, aber ich erlaube mir, die Stile ein wenig zu klären:
Blockquote :: vor,
Blockquote :: nach {
Hintergrundfarbe: #CCCCCCC;
Anzeige: Block;
Breite: 60px;
Höhe: 60px;
Zeilenhöhe: 1.618;
Schriftgröße: 3em;
Grenzradius: 100%;
Text-Align: Mitte;
Position: absolut;
} Wir haben Bestellung in HTML (<ol></ol> ) und Störung (<ul></ul> ) Liste. Beide haben Standardstile, die vom Browser User Agent Stylesheet ermittelt werden. Mit ::before Pseudoelement können wir diese "Standard" -Stile mit unseren eigenen Inhalten überschreiben. Erraten Sie, was? Wir können Emojis (?) Auf content verwenden!
.Name-list li :: vor {
Inhalt: "?";
Rand-Rechts: 15px;
Schriftgröße: 20px;
} Dies ist zwar gut, aber es ist erwähnenswert, dass wir ::marker Pseudo-Element verwenden können, die speziell zum Stil von Listenmarkierungen verwendet wird. Eric Meyer zeigt uns, wie es funktioniert, was auf lange Sicht ein besserer Ansatz sein kann.
Einer der cleversten Tricks, um ein Formular zu stylen, besteht darin, mithilfe des Standard -HTML -Kontrollkästchens Toggle -Switches zu erstellen. Tatsächlich hat Preethi Sam kürzlich einen Weg geteilt, als einige andere Tipps zum Checkbox -Stil mit CSS -Masken angezeigt werden.
Wie der Name schon sagt, wird der Toggle -Switch verwendet, um die ausgewählten und nicht ausgewählten Zustände des Kontrollkästchens umzuschalten oder zu wechseln.
<label> <input type="checkbox"> </label>
Alle Anpassungen werden zum ::before und ::after Pseudoelementen hinzugefügt werden<label></label> Änderung von Elementen. Aber zuerst hier sind einige<label></label> Grundlegende CSS für Elemente:
.Container {
Hintergrund: #212221;
Hintergrund: Linear-Gradient (nach rechts, #1560bd, #e90);
Border-Radius: 50px;
Höhe: 40px;
Position: Relativ;
Breite: 75px;
}Wir werden das Standardeintritt des Kontrollkästchens verbergen, während wir den gesamten Platz einnehmen. Seltsam? Es ist unsichtbar, existiert aber technisch immer noch. Wir tun dies von:
Eingabe {
-webkit-äarlich: keine; / * safari * /
Cursor: Zeiger; /*Zeigen Sie, dass es sich um ein interaktives Element handelt.
Höhe: 100%;
Position: absolut;
Breite: 100%;
} Verwenden wir nun seine ::before Pseudoelementeinstellungen<input> Elementstil. Dieser Stil verändert das Erscheinungsbild der Eingabe und bringt uns näher an das Endergebnis.
input :: vor {
Hintergrund: #ffff;
Border-Radius: 50px;
Inhalt: "";
Höhe: 70%;
Position: absolut;
Top: 50%;
Transformation: Translate (7px, -50%);
Breite: 85%;
} Was, warten? Sie könnten denken, dass ::before nicht mit Ersatzelementen, z.<input> . Dies ist korrekt, aber nur, wenn der Eingangstyp ein Bild ist, ist dies gleichwertig zu<img alt="7 Praktische Verwendungen für die :: vor und :: nach Pseudoelementen in CSS" > Element. Andere Formularsteuerungen (z. B. Kontrollkästchen) werden in der HTML-Spezifikation als Nicht-Ersatzelemente definiert.
Als nächstes müssen wir die Schaltfläche "Schalter" erstellen, die passiert, dass wir mit dem ::after pseudo-Element immer noch erstellen können. Es gibt jedoch zwei Punkte erwähnenswert:
transform , um nach zu verschieben<input> das Zentrum von. input :: nach {
Hintergrund: Linear-Gradient (nach rechts, orange, #8e2de2);
Border-Radius: 50px;
Inhalt: "";
Höhe: 25px;
Deckkraft: 0,6;
Position: absolut;
Top: 50%;
Transformation: Translate (7px, -50%);
Übergang: alle .4s;
Breite: 25px;
} Versuchen Sie, auf die Schaltfläche "Schalter" zu klicken. Nichts passiert. Dies liegt daran, dass wir uns nicht wirklich geändert haben<input> ausgewählter Status. Auch wenn wir es ändern, ist das Ergebnis… unangenehm.
Die Lösung besteht darin, die :checked Eigenschaft auf die Anwendung zu<input> :: ::after Pseudo-Element. Indem wir den ausgewählten Status des Kontrollkästchens speziell positionieren und mit dem ::after Pseudoelement verknüpft werden, können wir die Schaltfläche umschalten, die die Schaltfläche umschaltet, wieder in die ursprüngliche Position.
Eingabe: Checked :: After {
Deckkraft: 1;
Transformation: Translate (170%, -50%);
} Wir können Bilder mit Grenzen dekorieren, damit sie sich auffallen oder nahtlos in das Design einfügen. Wussten Sie, dass wir Gradienten an Grenzen verwenden können? Nun, wir können ::before (und natürlich gibt es andere Möglichkeiten).
Die Kernidee besteht darin, einen Gradienten auf dem Bild zu erstellen und das CSS z-index -Attribut und die negativen Werte zu verwenden. Negative Werte ziehen den Gradienten in Stapelreihenfolge unter das Bild. Dies bedeutet, dass das Bild immer oben angezeigt wird, solange der Gradient einen negativen z-index hat.
.gradient-border :: vor {
/*Stile gib*/
Inhalt: "";
/*Füllen Sie den gesamten Speicherplatz*/////
Position: absolut;
Top: 0;
links: 0;
unten: 0;
Rechts: 0;
/*Gradient erstellen*/
Hintergrund-Image: Linear-Gradient ( #1A1A1A, #1560BD);
/*Stapeln Sie die Gradienten hinter dem Bild*/
Z -Index: -1;
}
Figur {
/*Löschen Sie den Standardmarge*//
Rand: 0;
/*Drücken Sie das Bild, um den Gradienten dahinter anzeigen*/
Polsterung: 10px;
}Dies ähnelt dem, was wir im vorherigen Beispiel getan haben, aber hier wenden wir einen Gradienten oben im Bild an. Warum machen wir das? Es kann eine großartige Möglichkeit sein, dem Bild etwas Textur und Tiefe hinzuzufügen. Wenn es oben Text vorhanden ist, der zusätzlichen Kontrast erfordert, um die Lesbarkeit zu verbessern, kann er das Bild aufhellen oder verdunkeln.
Während dies ähnlich ist, was wir gerade getan haben, werden Sie einige offensichtliche Unterschiede bemerken:
Abbildung :: vor {
Hintergrundbild: Linear-Gradient (nach oben rechts, #1A1A1A, transparent);
Inhalt: "";
Höhe: 100%;
Position: absolut;
Breite: 100%;
} Hast du es gesehen? Es gibt keinen z-index , da es in Ordnung ist, Gradienten auf dem Bild zu stapeln. Wir führen auch Transparenz in den Hintergrundgradienten ein, mit dem das Bild durch den Gradienten angezeigt wird. Sie wissen, wie die Superposition.
Die meisten, wenn nicht alle, versuchen wir, den Standardstil von HTML -Optionsbildern anzupassen, der normalerweise mit ::before und ::after geschaltet ist, genau wie wir es mit Kontrollkästchen zuvor getan haben.
Wir haben zuerst einige grundlegende Stile festgelegt, nur um sich vorzubereiten:
/*Zentrieren Sie alle Inhalte*////
.flex-center {
Ausrichtung: Zentrum;
Anzeige: Flex;
Justify-Content: Center;
}
/*Stil des Formelements*///
.bilden {
Hintergrund: #CCC;
Höhe: 100VH;
Breite: 100%;
}
/*Eingegebener Stil*/
.Form-Row {
Hintergrund: #ffff;
Border-Radius: 50px;
Höhe: 40px;
Rand: 10px;
Überlauf: versteckt;
Position: Relativ;
Breite: 150px;
} Verwenden wir nun appearance: none; um den Standardstil des Optionsfelds zu löschen:
.Form-Input {
-webkit-äarlich: keine; / * safari * /
Aussehen: Keine;
} ::before sollte sich in der oberen linken Ecke des Optionsknopfs befinden, und wenn wir ausgewählt sind, werden wir seine Hintergrundfarbe ändern.
.Form-Input :: vor {
/*Stile gib*/
Inhalt: '';
/*Zeigen Sie, dass es interaktiv ist*/
Cursor: Zeiger;
/*Positionieren Sie es in die obere linke Ecke des Eingangs*/
Position: absolut;
Top: 0;
links: 0;
/*Belege den gesamten Raum*/
Höhe: 100%;
Breite: 100%;
}
/*Wenn die Eingabe ausgewählt ist ...*/
.Form-Input: Checked :: vor {
/*Hintergrundfarbe ändern*/
Hintergrund: #21209c;
} Wir müssen immer noch ::after verwenden, um einige Probleme zu lösen. Wenn das Optionsfeld ausgewählt ist, möchten wir die Farbe des kreisförmigen Ringes in Weiß ändern, da der Ring in seinem aktuellen Zustand blau ist.
.Form-Input :: After {
/*Stile gib*/
Inhalt: '';
/*Zeigen Sie, dass es interaktiv ist*/
Cursor: Zeiger;
/*Einige Grenzstile*/
Border-Radius: 50px;
Grenze: 4px Solid #21209c;
/*Positionierungsring*/
Position: absolut;
Links: 10%;
Top: 50%;
Transformation: Translate (0, -50%);
/*Set Size*/
Höhe: 15px;
Breite: 15px;
}
/*Wenn die Eingabe ausgewählt ist ...*/
.Form-Input: Checked :: After {
/*Ändern Sie den Grenze von :: After zu weiß*/
Grenze: 4px Solid #ffffff;
}Das Formular Tag ist hier noch nicht verfügbar. Wir müssen das Formularbezeichnung direkt lokalisieren, um die Farbe hinzuzufügen, und wenn die Formulareingabe ausgewählt ist, ändern wir die Farbe in die sichtbare Farbe.
.Form-Label {
Farbe: #21209c;
Schriftgröße: 1.1Rem;
Rand-Links: 10px;
} Klicken Sie auf die Schaltfläche und es gibt noch nichts zu reagieren. Was ist los? position: absolute on ::before und ::after dem Verschleierung des Inhalts, wenn das Optionsfeld ausgewählt ist, da alles, was in der HTML -Dokumenthierarchie auftritt, verdeckt wird, es sei denn, sie werden an einen neuen Ort im HTML -Dokument verschoben, oder deren Standort wurde mit CSS geändert. Daher wird jedes Mal, wenn ein Optionsfeld ausgewählt wird, sein Etikett überschrieben.
Sie wissen wahrscheinlich bereits, wie Sie dieses Problem lösen können, weil wir zuvor in einem anderen Beispiel ein ähnliches Problem gelöst haben? Wir wenden z-index: 1 (oder position: absolute ) auf die Formulierung von Tags an.
.Form-Label {
Farbe: #21209c;
Schriftgröße: 1.1Rem;
Rand-Links: 10px;
Z-Index: 1;
/* Position: Absolut;
} Wir haben sieben verschiedene Möglichkeiten behandelt, um interessante Effekte mit ::before und ::after Pseudoelementen zu erzielen, Standardstile anzupassen, nützliche Platzhalter zu machen und Bildern Grenzen hinzuzufügen.
Wir sind keineswegs alle Möglichkeiten abdecken, die bei der Nutzung dieser anderen Elemente freigeschaltet werden können, die mit CSS ausgewählt werden können. Lynn Fisher hat es jedoch zu einem Hobby gemacht und ein einzelnes Element verwendet, um erstaunliche Designs zu erstellen. Und vergessen wir nicht Diana Smiths CSS-Kunst, die Pseudoelemente an mehreren Orten für realistische Malereieffekte verwendet.
Das obige ist der detaillierte Inhalt von7 Praktische Verwendungen für die :: vor und :: nach Pseudoelementen in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Einführung in die Verwendung der Funktion sort() in Python
Was ist ein Browser-Plugin?
Treiber für Laptop-Soundkarte
So ändern Sie das Passwort in MySQL
Welche Big-Data-Speicherlösungen gibt es?
So laden Sie die heutigen Schlagzeilenvideos herunter und speichern sie
So verwenden Sie die Monatsfunktion
Bereinigen Sie den Müll in Win10
orientdb
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
