Heim > Web-Frontend > CSS-Tutorial > Hauptteil

CSS-Pseudoelemente

WBOY
Freigeben: 2023-09-10 21:09:01
nach vorne
734 Leute haben es durchsucht

Wir können bestimmte Teile eines Elements formatieren, z. B. den ersten Buchstaben, die erste Zeile oder sogar davor/danach einfügen. Nutzen Sie zu diesem Zweck CSS-Pseudoelemente.

HINWEIS – Um CSS-Pseudoklassen von Pseudoelementen zu trennen, verwenden Sie in CSS3 Pseudoelemente die Doppelpunkt-Notation.

Syntax

Hier ist die Syntax für die Verwendung von CSS-Pseudoelementen für ein Element – ​​

Selector::pseudo-element {
   css-property: /*value*/;
}
Nach dem Login kopieren

Hier sind alle verfügbaren CSS-Pseudoelemente –

🔜 5 Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
   background-color: black;
}
p::first-line {
   background-color: lightgreen;
   color: white;
}
span {
   font-size: 2em;
   color: #DC3545;
}
</style>
</head>
<body>
<h2>Computer Networks</h2>
<p><span>A</span> system of interconnected computers and computerized peripherals such as printers is called computer network. </p>
</body>
</html>
Nach dem Login kopieren
Beispiel Live-Demonstration

Das obige ist der detaillierte Inhalt vonCSS-Pseudoelemente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:tutorialspoint.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Sr.NoPseudoelement und Beschreibung
3

erster Buchstabe

Es wählt den ersten Buchstaben jedes erwähnten Elements aus

4

erste Zeile

Es wählt den ersten Buchstaben jedes erwähnten Elements aus. Erste Zeile

Platzhalter

Sehen wir uns ein Beispiel für CSS-Pseudoelemente an –

Live-Demonstration Ausgabe Sehen wir uns ein weiteres Beispiel für CSS-Pseudoelemente an –

<!DOCTYPE html>
<html>
<head>
<style>
div:nth-of-type(1) p:nth-child(2)::after {
   content: " LEGEND!";
   background: orange;
   padding: 5px;
}
div:nth-of-type(2) p:nth-child(2)::before {
   content: "Book:";
   background-color: lightblue;
   font-weight: bold;
   padding: 5px;
}
</style>
</head>
<body>
<div>
<p>Cricketer</p>
<p>Sachin Tendulkar:</p>
</div>
<hr>
<div>
<p><q>Chase your Dreams</q></p>
<p><q>Playing It My Way</q></p>
</div>
</body>
</html>
Nach dem Login kopieren
Ausgabe