Können Sie die Farben von Listenaufzählungszeichen anpassen, ohne ein „'-Element zu verwenden?

So passen Sie Listenaufzählungszeichen ohne Spanne an

In HTML bietet eine Aufzählungsliste eine prägnante und geordnete Möglichkeit, Elemente darzustellen. Standardmäßig ist der Aufzählungsstil jedoch begrenzt und kann nicht geändert werden, ohne zusätzliche Elemente wie einen Span hinzuzufügen.

Können Sie die Farben von Listenaufzählungszeichen ändern, ohne Span zu verwenden?

Ja, es ist möglich, die Farben von Aufzählungszeichen mithilfe von CSS und dem Pseudoelement :before zu ändern, ohne dass zusätzliches Markup innerhalb der Liste erforderlich ist Elemente.

Implementierung

1. Entfernen Sie den Standard-Aufzählungsstil:

   li {
     list-style: none;
   }

   Nach dem Login kopieren

2. Fügen Sie ein :before Pseudoelement zum Anzeigen eines benutzerdefinierten Elements Aufzählungszeichen:

   li:before {
     content: '22'; /* Unicode character for a round bullet */
     display: block;
     position: relative;
     max-width: 0;
     max-height: 0;
     left: -10px;
     top: 0;
     color: green;
     font-size: 20px;
   }

   Nach dem Login kopieren

• Inhalt: Gibt das Unicode-Zeichen für die gewünschte Aufzählungszeichenform an.
• Farbe: Legt die Farbe des Aufzählungszeichens fest.
• Schriftgröße: Passt an Die Größe des Aufzählungszeichens.

Hinweis: Diese Methode funktioniert gut in modernen Browsern, ist jedoch möglicherweise nicht mit älteren IE-Versionen kompatibel.

Beispiel-HTML

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

Das obige ist der detaillierte Inhalt vonKönnen Sie die Farben von Listenaufzählungszeichen anpassen, ohne ein „'-Element zu verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!