So verwenden Sie Pseudoelemente davor und danach in CSS
Wie verwende ich Pseudoelemente davor und danach in CSS? In diesem Artikel erfahren Sie, wie Sie die Pseudoelemente davor und danach in CSS verwenden.
Was sind::vorher und ::nachher?
Die Beschreibungen von Vorher und Nachher lauten wie folgt
元素::before {content:插入的内容;}
元素::after {content:插入的内容;}Inhalt: Geben Sie einen Teil des einzufügenden Inhalts ein
Um Buchstaben und Symbole in den Inhalt einzufügen, bitte Verwenden Sie „“-Klammern. Stehen Sie auf und treten Sie ein.
Um Bilder und Töne in Inhalte einzufügen, geben Sie die URL (Zielpfad) ein.
Sie können auch Vorher und Nachher für dasselbe Element angeben.
Pseudoelemente wie before und after in CSS3 verwenden :: (doppelter Doppelpunkt), aber selbst mit nur einem Doppelpunkt wird es in den meisten Browsern erkannt und funktioniert ordnungsgemäß.
Unterstützte Browser
Browser, die ::before und ::after Pseudoelemente unterstützen: Chrome, Firefox3.5~, Safari4~, IE8 ~, Opera6~.
Wie verwende ich Pseudoelemente vorher und nachher?
Unten sehen Sie eine HTML-Datei mit angewendetem Vorher und Nachher
(dies ist ein Beispiel, bei dem sich die Dateien *html und css im selben Verzeichnis befinden und der Dateiname des externen Stylesheets „ sample.css")
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<h3 id="标题前加入标记">标题前加入标记</h3>
<p>段落前插入图像</p>
</body>
</html>sample.css
h3::before{
content:"◆";
}
p::before{
content:url(img/luffys.jpg);
}In diesem Beispiel wird das Symbol „♦“ vor der Überschrift von
und davor eingefügt der Absatz von
Bilddatei „img/luffys.jpg“.
Im Browser sieht es so aus: Vor dem Titel steht ein „◆“ und vor dem Absatz wird eine Bilddatei eingefügt.
Das Folgende ist ein Beispiel für die Verwendung von „Vorher“ und „Nachher“ für dasselbe Element.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<h3 id="在标题之前和之后加入标记">在标题之前和之后加入标记</h3>
<p>段落后插入图像</p>
</body>
</html>sample.css
h3 :: before {content："◆";}
h3 :: after {content："◆";}
p :: after {content：url（img/luffys.jpg）;}In diesem Beispiel wird das Symbol „♦“ am Anfang und Ende der Überschrift
eingefügt, und das Bild wird nach dem Absatz eingefügt.
Im Browser sieht es so aus: Symbole vor und nach dem Titel und Bilder nach den Absätzen hinzufügen.
Erklären Sie abschließend die Anzahl der Doppelpunkte
Es gibt zwei Pseudoelemente: before /: after und :: before / : :nach.
Schreiben Sie in CSS2 einen Doppelpunkt, z. B.: vorher /: danach.
Schreiben Sie in CSS3 zwei Doppelpunkte, zum Beispiel :: davor / :: danach.
Da CSS3 das neueste CSS ist, kann man auch sagen, dass die Pseudoelemente ::before / ::after sind.
Für ::before / ::after, kompatibel mit den wichtigsten Browsern.
Es ist jedoch zu beachten, dass einige Syntax von CSS3 nicht mit den wichtigsten Browsern kompatibel ist.
Das obige ist der detaillierte Inhalt vonSo verwenden Sie Pseudoelemente davor und danach in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1376
52
Warum scheitern Pseudoelemente?
Nov 21, 2023 pm 05:13 PM
Gründe für Pseudoelementfehler: 1. Selektorprobleme; 3. Vererbungsprobleme; 5. Probleme mit der Browserkompatibilität; Detaillierte Einführung: 1. Selektorproblem: Der Selektor des Pseudoelements ist möglicherweise falsch, was dazu führt, dass das Zielelement nicht ausgewählt werden kann. 2. Stilkonflikt: Wenn in CSS ein Stilkonflikt vorliegt, wird das Pseudoelement möglicherweise ungültig. 3. Vererbungsproblem, Pseudoelemente erben möglicherweise nicht bestimmte Stilattribute; 4. Syntaxfehler im CSS können dazu führen, dass die Pseudoelemente ungültig werden.
Implementieren Sie verschiedene Anwendungsszenarien des CSS::placeholder-Pseudoelementselektors
Nov 20, 2023 pm 03:17 PM
Um verschiedene Anwendungsszenarien des CSS::placeholder-Pseudoelementselektors zu implementieren, sind spezifische Codebeispiele erforderlich. In der Webentwicklung ist CSS eine häufig verwendete Stylesheet-Sprache, die zur Steuerung des Layouts und Stils von Webseiten verwendet wird. Der Pseudoelementselektor ::placeholder ist ein neuer Selektor in CSS3, der zum Ändern des Platzhalterstils von Eingabefeldern (einschließlich Texteingabefeldern, Passworteingabefeldern usw.) verwendet wird. Im Folgenden stellen wir verschiedene Anwendungsszenarien vor und stellen entsprechende Codebeispiele bereit. Ändern Sie die Farbe des Eingabefeld-Platzhalters:
CSS-Pseudo-Selektor-Lernen, Pseudoklassen-Selektor-Analyse
Aug 03, 2022 am 11:26 AM
Im vorherigen Artikel „Css-Pseudo-Selektor-Lernen – Pseudo-Element-Selektor-Analyse“ haben wir etwas über Pseudo-Element-Selektoren gelernt, und heute werfen wir einen genaueren Blick auf Pseudo-Klassen-Selektoren. Ich hoffe, dass es für alle hilfreich ist!
Warum Hover ein Pseudoelement ist
Oct 09, 2023 pm 05:45 PM
Hover ist kein Pseudoelement, sondern eine Pseudoklasse. Pseudoklassen werden verwendet, um einen bestimmten Zustand oder ein bestimmtes Verhalten eines Elements auszuwählen, während Pseudoelemente verwendet werden, um bestimmten Teilen eines Elements Stile hinzuzufügen. Da :hover zum Auswählen eines bestimmten Zustands eines Elements verwendet wird, anstatt Stile zu einem bestimmten Teil des Elements hinzuzufügen, können Sie die Pseudoklasse :hover verwenden, um den Mouseover-Status eines Elements zu formatieren, und Sie können :hover verwenden Pseudoklasse zum Hinzufügen von Hover-Effekten zu Links. Die Farbe, Hintergrundfarbe usw. des Links können sich ändern, wenn die Maus darüber fährt.
Entdecken Sie die grundlegenden Konzepte und Verwendungsszenarien von CSS-Pseudoklassen und Pseudoelementen
Dec 23, 2023 pm 01:21 PM
Verstehen Sie die grundlegenden Konzepte und Anwendungsszenarien von CSS-Pseudoklassen und Pseudoelementen. CSS (CascadingStyleSheets) ist eine Auszeichnungssprache, die zur Beschreibung des Stils von Webseiten verwendet wird. Sie kann das Erscheinungsbild und Layout von Elementen in Webseiten steuern. In CSS sind Pseudoklassen und Pseudoelemente sehr nützliche Funktionen, die den Anwendungsbereich und die Flexibilität von CSS weiter erweitern können. 1. Pseudoklassen Pseudoklassen sind Schlüsselwörter, die zur Auswahl bestimmter Zustandselemente verwendet werden. Zu den gängigen Pseudoklassen gehören: Hover, Active, Focus usw. Hier sind einige häufige
Welchen Nutzen hat das Hinzufügen von Pseudoelementen?
Oct 09, 2023 pm 05:45 PM
Pseudoelemente können verwendet werden, um dekorative Effekte zu erzeugen, bestimmte Layouteffekte zu erzielen, interaktive Effekte zu erzeugen, bestimmte Elementzustände zu ändern und einige Spezialeffekte zu erzeugen. Detaillierte Einführung: 1. Erstellen Sie dekorative Effekte. Durch Festlegen der Inhaltsattribute und Stile des Pseudoelements: before oder: after können Sie Symbole, Formen oder andere dekorative Elemente vor oder nach dem Element einfügen, sodass Sie weitere Elemente hinzufügen können 2. Erzielen Sie spezifische Layouteffekte, die durch :before- und :after-Pseudoelemente usw. erzeugt werden können.
Was sind Pseudoelemente?
Oct 09, 2023 pm 05:01 PM
Pseudoelemente sind spezielle Selektoren in CSS, die zum Einfügen von Inhalten an bestimmten Stellen eines Elements verwendet werden. Sie werden „Pseudoelemente“ genannt, da es sich nicht um Elemente handelt, die tatsächlich im HTML-Dokument vorhanden sind, sondern durch CSS erstellt werden . Es kann verwendet werden, um Inhalte vor oder nach einem Element oder an einer bestimmten Stelle innerhalb eines Elements einzufügen, normalerweise um einen dekorativen Effekt hinzuzufügen oder das Erscheinungsbild des Elements zu ändern. In CSS werden Pseudoelemente durch doppelte Doppelpunkte statt durch einzelne Doppelpunkte dargestellt. Dies dient der Unterscheidung von Pseudoklassen, die durch einzelne Doppelpunkte dargestellt werden.
Welches Gewicht haben Pseudoelemente?
Oct 11, 2023 pm 02:02 PM
Das Gewicht von Pseudoelementen beträgt 0. In CSS wird die Selektorgewichtung verwendet, um die Priorität von Stilen zu bestimmen. Je höher der Gewichtungswert, desto höher die Priorität und der Stil wird angewendet. Dies bedeutet, dass der Pseudoelement-Selektor unabhängig davon, wo er im Selektor erscheint, das niedrigste Gewicht hat. Selbst in Kombination mit anderen Selektoren hat das Gewicht eines Pseudoelement-Selektors keinen Einfluss auf das Gewicht des gesamten Selektors. Unabhängig von der Gewichtung anderer Selektoren werden die Stile von Pseudoelement-Selektoren nicht überschrieben usw.
