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.
SyntaxHier 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 –
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 | |
5 | 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 – | Beispiel
<!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 |