suchen

Heim  >  Artikel  >  Web-Frontend  >  CSS-Pseudoelemente

CSS-Pseudoelemente

WBOY
WBOYnach vorne
2023-09-10 21:09:01719Durchsuche

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*/;
}

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>
Beispiel Live-Demonstration Ausgabe
Sr.No Pseudoelement und Beschreibung
3erster Buchstabe

Es wählt den ersten Buchstaben jedes erwähnten Elements aus
4erste 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 strong> 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>

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

css css3 伪类 伪元素
Stellungnahme：
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Wie kann das Flex-Attribut von CSS3 verwendet werden, um den kaskadierenden Effekt des Webseitenlayouts zu erzielen?Nächster Artikel：Wie kann das Flex-Attribut von CSS3 verwendet werden, um den kaskadierenden Effekt des Webseitenlayouts zu erzielen?

In Verbindung stehende Artikel

Mehr sehen