Wie ändere ich die Farben von Aufzählungszeichen in HTML-Listen, ohne Span-Elemente zu verwenden?

So ändern Sie die Farben von Aufzählungszeichen in HTML-Listen ohne Span-Elemente

In bestimmten Szenarien möchten Sie möglicherweise die Farbe von Aufzählungszeichen in einer ändern HTML-Liste ohne Hinzufügen von Elementen innerhalb von

Tags. Hier ist eine geniale Lösung, die die Verwendung von Spannen vermeidet.

Um dies zu erreichen, nutzen Sie das :before-Pseudoelement:

li {
  list-style: none;
}

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

Diese Methode entfernt den Standard-Aufzählungsstil und erstellt ein neues Aufzählungszeichen über :before. Es bietet Flexibilität in Bezug auf Form und Farbe und unterstützt die wichtigsten Browser wie IE8, Firefox und Chrome.

Das obige ist der detaillierte Inhalt vonWie ändere ich die Farben von Aufzählungszeichen in HTML-Listen, ohne Span-Elemente zu verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!