Heim > Web-Frontend > CSS-Tutorial > Kann ich Aufzählungszeichen in HTML-Listen einfärben, ohne die Tags „' oder „' zu verwenden?

Kann ich Aufzählungszeichen in HTML-Listen einfärben, ohne die Tags „' oder „' zu verwenden?

Mary-Kate Olsen
Freigeben: 2024-12-10 05:18:12
Original
700 Leute haben es durchsucht

Can I Color HTML List Bullets Without Using `` or `` Tags?

HTML-Listenaufzählungszeichen ohne Span einfärben

Frage:

Kann die Farbe von Aufzählungszeichen in einer HTML-Liste ohne geändert werden? Hinzufügen von Elementen wie oder

innerhalb der

  • Tags?

    Antwort:

    Ja, Sie können dies erreichen, indem Sie das Pseudoelement li:before verwenden:

    li {
      list-style: none;
    }
    
    li:before {
      /* Use 22 for a round bullet */
      /* Use A0 for a square bullet */
      content: '22';
      display: block;
      position: relative;
      max-width: 0;
      max-height: 0;
      left: -10px;
      top: 0;
      color: green;
      font-size: 20px;
    }
    Nach dem Login kopieren
    <ul>
      <li>foo</li>
      <li>bar</li>
    </ul>
    Nach dem Login kopieren

    Diese Technik erfordert kein zusätzliches Markup innerhalb des

  • Elemente. Allerdings gibt es bestimmte Einschränkungen:

    • Unterstützte Browser: IE8 und höher, Firefox, Chrome
    • Der Aufzählungszeichenstil ist auf Unicode-Zeichen beschränkt

    Das obige ist der detaillierte Inhalt vonKann ich Aufzählungszeichen in HTML-Listen einfärben, ohne die Tags „' oder „' zu verwenden?. 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