Wie kann ich Aufzählungsfarben in HTML-Listen mithilfe von CSS anpassen?

Anpassen der Aufzählungszeichenfarben in HTML-Listen mit CSS

In HTML-Listen kann das Anpassen des Erscheinungsbilds der Aufzählungszeichen die visuelle Attraktivität des Inhalts verbessern. Das Festlegen der Farbe der Listenelemente mithilfe von CSS wirkt sich jedoch sowohl auf den Text als auch auf die Aufzählungszeichen aus. Betrachten Sie für eine elegantere Lösung den folgenden Ansatz:

Erstellen Sie einen neuen CSS-Stil für die ungeordnete Liste (

). Deaktivieren Sie die Standardaufzählungszeichen, indem Sie „list-style: none;“ festlegen.

Fügen Sie für jedes Listenelement (

• ) einen Abstand auf der linken Seite und einen negativen Texteinzug hinzu, um den Inhalt vom Aufzählungszeichen zu versetzen.

  Verwenden Sie abschließend das Pseudoelement ::before, um vor jedem Listenelement ein benutzerdefiniertes Aufzählungszeichen zu erstellen. Sie können den Inhalt (z. B. einen Punkt oder ein Quadrat) und die Farbe unabhängig voneinander festlegen.

  Beispiel:

  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: -0.7em;
  }
  
  li::before {
    content: "• ";
    color: red; 
  }

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