Wie ändere ich die Aufzählungsfarben in HTML-Listen ohne Bilder oder zusätzliche Tags?

So passen Sie Aufzählungsfarben in HTML-Listen an, ohne Bilder oder Span-Tags zu verwenden

Die Herausforderung

Beim Anpassen einer unsortierten HTML-Liste mit quadratischen Aufzählungszeichen mithilfe von list-style:square; kann das Problem auftreten, dass stattdessen die gesamten Listenelemente die angegebene Farbe annehmen nur aus den Kugeln. Da stellt sich die Frage: Wie ändern wir die Farbe der Aufzählungszeichen, ohne auf Sprite-Bilder oder zusätzliche Tags zurückzugreifen?

Die Lösung

Eine einfache und effektive Lösung existiert:

HTML

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

CSS

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  padding-left: 1em; 
  text-indent: -.7em;
}

li::before {
  content: "• ";
  color: red; /* or any desired color */
}

In diesem Ansatz:

• Listenstil: keiner; Entfernt die Standardaufzählungszeichen.
• padding-left und text-indent passen die Inhaltspositionierung an.
• li::before fügt das Aufzählungszeichen mithilfe der Content-Eigenschaft ein. Die Farbeigenschaft gibt dann die gewünschte Farbe an.

Diese Technik ermöglicht eine elegante Anpassung der Aufzählungsfarben in HTML-Listen, ohne dass zusätzliche Elemente oder Bilder erforderlich sind.

Das obige ist der detaillierte Inhalt vonWie ändere ich die Aufzählungsfarben in HTML-Listen ohne Bilder oder zusätzliche Tags?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!