CSS => Pseudo-Elemente

Einführung

Pseudo-Elemente werden wie Pseudo-Klassen einem CSS-Selektor hinzugefügt. Statt jedoch einen speziellen Zustand zu beschreiben, können Sie bestimmte Bereiche eines HTML-Elements bestimmen und gestalten.

Das :: Anfangsbuchstabe-Pseudoelement zielt beispielsweise nur auf den ersten Buchstaben eines Blockelements, das vom Selektor angegeben wird.

Syntax

Selector :: Pseudoelement {Eigenschaft: Wert}

Parameter

Pseudoelement	Beschreibung
`::after`	Fügen Sie den Inhalt nach dem Inhalt eines Elements ein
`::before`	Fügen Sie den Inhalt vor dem Inhalt eines Elements ein
`::first-letter`	Wählt den ersten Buchstaben jedes Elements aus
`::first-line`	Wählt die erste Zeile jedes Elements aus
`::selection`	Stimmt mit dem Teil eines Elements überein, das von einem Benutzer ausgewählt wird
`::backdrop`	Wird verwendet, um einen Hintergrund zu erstellen, der das zugrunde liegende Dokument für ein Element im Stapel der obersten Ebene versteckt
`::placeholder`	Ermöglicht die Formatierung des Platzhaltertextes eines Formularelements (experimentell)
`::marker`	Zum Anwenden von Listenstilattributen auf ein bestimmtes Element (experimentell)
`::spelling-error`	Stellt ein Textsegment dar, das der Browser als falsch geschrieben markiert hat (experimentell).
`::grammar-error`	Stellt ein Textsegment dar, das vom Browser als grammatikalisch nicht korrekt gekennzeichnet wurde (experimentell).

Bemerkungen

Manchmal werden Sie zwei Doppelpunkte (siehe :: ) anstelle von nur einem ( : ). Dies ist eine Möglichkeit , Pseudoklassen von Pseudo-Elemente zu trennen, aber einige ältere Browser wie Internet Explorer 8 unterstützt nur einzelne Doppelpunkt ( : ) für Pseudoelemente.
In einem Selektor kann nur ein Pseudoelement verwendet werden. Es muss hinter den einfachen Selektoren in der Anweisung stehen.
Pseudo-Elemente sind nicht Teil des DOMs und können daher nicht gezielt angesteuert werden durch :hover oder andere Benutzerereignisse.

Pseudo-Elemente

Pseudo-Elemente werden Selektoren hinzugefügt, aber anstatt einen speziellen Status zu beschreiben, können Sie bestimmte Teile eines Dokuments formatieren.

Das content ist für das Rendern von Pseudoelementen erforderlich. Das Attribut kann jedoch einen leeren Wert haben (z. B. content: "" ).

div::after {
  content: 'after';
  color: red;
  border: 1px solid red;
}

div {
  color: black;
  border: 1px solid black;
  padding: 1px;
}

div::before {
  content: 'before';
  color: green;
  border: 1px solid green;
}

Pseudoelemente in Listen

Pseudoelemente werden häufig verwendet, um das Aussehen von Listen zu ändern (meistens für ungeordnete Listen, ul ).

Der erste Schritt besteht darin, die Standardaufzählungszeichen zu entfernen:

ul {
  list-style-type: none;
}

Dann fügen Sie das benutzerdefinierte Styling hinzu. In diesem Beispiel erstellen wir Verlaufsfelder für Aufzählungszeichen.

li:before {
  content: "";
  display: inline-block;
  margin-right: 10px; 
  height: 10px;
  width: 10px;
  background: linear-gradient(red, blue);
}

HTML

<ul>
   <li>Test I</li>
   <li>Test II</li>
</ul>

Ergebnis

Modified text is an extract of the original Stack Overflow Documentation

Lizenziert unter CC BY-SA 3.0

Nicht angeschlossen an Stack Overflow

CSS
Pseudo-Elemente

Suche…