Benutzerdefinierte Aufzählungszeichen mit CSS :: Lesezeichen

Heute freuen wir uns, über das zu sprechen :: marker Pseudo-Element, mit dem Sie das von Browsern für Sie erstellte Aufzählungselement entwerfen können.

Lesezeichen erstellen

das :: marker Das Pseudoelement-Markierungsfeld wird automatisch in jedem Element des Listenelements vor dem eigentlichen Inhalt und dem generiert :: Vor Pseudoelement.

li::before {
Inhalt: "::before";
Hintergrund: lightgray;
Randradius: 1ch;
padding-inline: 1ch;
margin-inline-end: 1ch;
}

In der Regel sind die Elemente in der Liste

<dl>
<dt>Lorem</dt>
<dd>Lorem ipsum dolor sit amet consectetur adipisicing elit</dd>
<dd>Dolores quaerat illo totam porro</dd>
<dt>Ipsum</dt>
<dd>Quidem aliquid perferendis voluptates</dd>
</dl>

dd {
  Anzeige: list-item;
  Listenstil-Typ: "🤯";
  padding-inline-start: 1ch;
}

Einen Marker kämmen

Bis um :: markerListen können mit erstellt werden Listenstil-Typ y Listenstil-Bild So ändern Sie das Symbol des Listenelements mit 1 Zeile CSS:

li {
Listenstil-Bild: URL(/right-arrow.svg);
Listenstil-Typ: '👉';
padding-inline-start: 1ch;
}

Das ist nützlich, aber wir brauchen mehr. Wie wäre es mit einer Änderung von Farbe, Größe, Abstand usw.? Das ist wo :: marker kommt zur Rettung. Ermöglicht das individuelle und globale Targeting dieser CSS-Pseudoelemente:

li::marker {
Farbe: hotpink;
}
li:first-child::marker {
font-size: 5rem;
}

das Listenstil-Typ Das Anwesen bietet nur sehr begrenzte Gestaltungsmöglichkeiten. das :: marker Pseudoelement bedeutet, dass Sie auf den Marker selbst zeigen und ihn direkt formatieren können. Dies ermöglicht mehr Kontrolle.

Davon abgesehen können Sie nicht alle CSS-Eigenschaften in a verwenden :: marker. Die Liste der zulässigen und nicht zulässigen Eigenschaften ist in der Spezifikation deutlich angegeben. Wenn Sie mit diesem Pseudoelement etwas Cooles ausprobieren und es nicht funktioniert, ist die folgende Liste Ihr Leitfaden dafür, was mit CSS getan werden kann und was nicht:

CSS erlaubt :: marker Eigenschaften

• Animation- *
• Überleitung- *
• Farbe
• Richtung
• font- *
• Inhalt
• Unicode-Bidi
• Leerraum

Ändern Sie den Inhalt von a :: marker Es ist gemacht mit Inhalt gegenüber Listenstil-Typ. Im folgenden Beispiel wird der Stil des ersten Elements verwendet Listenstil-Typ und der zweite mit :: marker. Die Eigenschaften im ersten Fall gelten für das gesamte Element in der Liste, nicht nur für die Markierung. Dies bedeutet, dass der Text genau wie die Markierung animiert wird. Wenn Sie verwenden :: marker Wir können nur auf das Markierungsfeld und nicht auf den Text zeigen.

Beachten Sie auch, wie das nicht erlaubt ist Hintergrund Eigentum hat keine Wirkung.

li:nth-child(1) {
Listenstil-Typ: '?';
font-size: 2rem;
Hintergrund: hsl(200 20% 88%);
animation: color-change 3s ease-in-out infinite;
}

li:nth-child(2)::marker {
Inhalt: '!';
font-size: 2rem;
Hintergrund: hsl(200 20% 88%);
animation: color-change 3s ease-in-out infinite;
}

Ändern Sie den Inhalt eines Lesezeichens

Dies sind einige der Möglichkeiten, wie Sie Ihre Lesezeichen gestalten können.

Ändern Sie alle Elemente in der Liste

li {
Listenstil-Typ: "😍";
}
li::marker {
Inhalt: "😍";
}

Ändern Sie nur ein Element in der Liste

li:last-child::marker {
Inhalt: "😍";
}

Ändern Sie ein Listenelement in SVG

li::marker {
Inhalt: URL(/heart.svg);
Inhalt: URL(#heart);
Inhalt: URL("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='24' width='24'><path d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z' fill='none' stroke='hotpink' stroke-width='3'/></svg>");
}

Nummerierte Listen ändern
Wie wäre es mit einer

selbst wenn? Die Markierung in einem geordneten Listenelement ist standardmäßig eine Zahl und kein Aufzählungszeichen. In CSS werden diese aufgerufen Buchhalterund sie sind ziemlich mächtig. Sie haben sogar Eigenschaften, mit denen Sie festlegen und zurücksetzen können, wo die Zahl beginnt und endet, oder sie in römische Ziffern ändern können. Können wir das entwerfen? Ja, und wir können sogar den Wert des Lesezeicheninhalts verwenden, um unsere eigene Nummerierungspräsentation zu erstellen.

li::marker {
Inhalt: counter(list-item) "› "; 
Farbe: hotpink;
}

Depuration

Chrome DevTools hilft Ihnen beim Überprüfen, Debuggen und Ändern der angewendeten Stile :: marker Pseudoelemente.




Zukünftiger Stil von Pseudoelementen

Weitere Informationen zu :: marker erhalten Sie unter:

Es ist großartig, Zugang zu etwas zu haben, das schwer zu entwerfen war. Möglicherweise möchten Sie in der Lage sein, andere automatisch generierte Elemente zu entwerfen. Sie könnten frustriert sein

oder das Flag für die automatische Vervollständigung der Sucheingabe, Dinge, die nicht in allen Browsern gleich implementiert sind. Eine Möglichkeit, das zu teilen, was Sie benötigen, besteht darin, einen Wunsch in zu erstellen https://webwewant.fyi.