Wie kann ich die Farbe der Aufzählungszeichen in HTML ändern, ohne Spans zu verwenden?

Ändern der Farbe von Listenaufzählungszeichen ohne Spanne

In HTML kann das Anpassen der Farbe von Listenaufzählungszeichen eine Herausforderung sein. Obwohl es möglich ist, Listenelemente in Spannen einzuschließen, ist dies in bestimmten Szenarios möglicherweise keine Option. Bei dieser Frage wird nach einer Lösung gesucht, die die Aufzählungsfarbe ändert, ohne zusätzliches Markup hinzuzufügen.

Um dies zu erreichen, nutzt die Antwort das CSS-Pseudoelement li:before. Durch Festlegen von list-style: none für das li-Element wird das Standardaufzählungszeichen entfernt. Das li:before-Element wird dann verwendet, um ein benutzerdefiniertes Aufzählungszeichen anzuzeigen, wobei die content-Eigenschaft verwendet wird, um ein Unicode-Zeichen anzugeben. Die Farbeigenschaft legt die gewünschte Aufzählungsfarbe fest.

Hier ist der CSS-Code:

li {
  list-style: none;
}

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

Um diese Lösung zu verwenden, wenden Sie einfach den CSS-Stil wie folgt auf Ihre Liste an:

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

Mit dieser Technik können Sie die Farbe von Aufzählungszeichen ändern, ohne den Inhalt des Listenelements zu ändern oder zusätzliches Markup hinzuzufügen, und bieten so eine flexible Möglichkeit, Ihre HTML-Listen anzupassen.

Das obige ist der detaillierte Inhalt vonWie kann ich die Farbe der Aufzählungszeichen in HTML ändern, ohne Spans zu verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!