Wie kann ich Aufzählungsfarben in HTML-Listen nur mit CSS ändern?

Aufzählungsfarben in HTML-Listen ohne Bilder oder Inline-Elemente festlegen

Beim Gestalten ungeordneter Listen möchte man möglicherweise die Farbe der Aufzählungszeichen ändern ohne Auswirkungen auf den Text des Listenelements. Beim einfachen Festlegen der Farbe des

Element funktioniert, es ändert auch die Textfarbe.

Eine elegante Nur-CSS-Lösung

Die Antwort liegt im ::before-Pseudoelement:

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

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

li::before {
  content: "•";
  color: #F00;
}

Dieser Code erzielt den gewünschten Effekt, ohne auf Bilder oder Inline-Elemente zurückzugreifen. So funktioniert es:

• list-style: none; Entfernt die Standardaufzählungszeichen.
• ::before erstellt ein Pseudoelement, das vor jedem
• positioniert wird. Artikel.
• Inhalt: „•“ gibt das gewünschte Aufzählungszeichen als Scheibe oder Quadrat an.
• Farbe: #F00; legt die Farbe des Aufzählungszeichens fest.
• Das Einrücken des Listenelementtextes mit padding-left und text-indent stellt die Ausrichtung am Aufzählungszeichen sicher.

Das obige ist der detaillierte Inhalt vonWie kann ich Aufzählungsfarben in HTML-Listen nur mit CSS ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!