Heim > Web-Frontend > CSS-Tutorial > Wie ändere ich die Aufzählungsfarben von HTML-Listen nur mit CSS?

Wie ändere ich die Aufzählungsfarben von HTML-Listen nur mit CSS?

Mary-Kate Olsen
Freigeben: 2024-12-25 10:44:11
Original
710 Leute haben es durchsucht

How to Change HTML List Bullet Colors Using Only CSS?

So gestalten Sie die Farben von Aufzählungszeichen in HTML-Listen

F: Wie kann ich die Farbe der Aufzählungszeichen in einer unsortierten HTML-Liste ändern, ohne zu verwenden Bilder oder Span-Tags?

A: Hier ist eine elegante Lösung mit CSS:

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

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

li::before {
  content: "• ";
  color: red; /* or whatever color you prefer */
}
Nach dem Login kopieren

HTML:

<ul>
  <li>Foo</li>
  <li>Bar</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
</ul>
Nach dem Login kopieren

Dadurch erhalten Sie quadratische Aufzählungszeichen mit roter Farbe, ohne die Verwendung von Bildern oder Spam-Tags.

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

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage