De kleur van bullets veranderen

Om de bullets in een ongeordende lijst (de tag <ul>) op te maken zijn in HTML veel mogelijkheden. Die worden besproken in het item Bullets van lijsten veranderen.
Voor het opmaken van bullets ontbreekt in HTML echter een belangrijke optie: Je kunt de kleur niet veranderen.

Op de site www.w3schools.com staat een eenvoudige workaround om het toch voor elkaar te krijgen. Op deze bladzijde wordt die methode besproken en een beetje uitgebreid.

Er wordt alleen CSS gebruikt om dit te bereiken. De aanpak is als volgt:

• Verwijder eerst de default-bullets uit de hele <ul>: ul { list-style: none; }
• Maak voor elke <li>-tag een nieuwe bullet: ul li:before { … }
  In dit block wordt de bullet gedefinieerd en opgemaakt. Het wordt vóór de content van de <li>-tag geplaatst. In het voorbeeld is het een rood driehoekje.
• Het driehoekje wordt gemaakt door bij content de code \25b6 in te vullen. Zie ook de tabel hieronder.
• color bevat de gewenste kleur van de bullets.
• Er is display: inline-block opgegeven om te zorgen dat de bullet en de eerste regel van de tekst op één lijn komen te staan.
• De breedte van de bullet + de witruimte is 2em: width: 2em. De bullet zelf is 1em breed, de witruimte is dus ook 1em breed.
• De bullet wordt 3em naar links geschoven met margin-left: -3em. Dat is de breedte van de bullet (2em) + de automatische inspringing van 1em. Daardoor worden de bullets uitgelijnd op de linker marge.
• Doordat de width en de verschillen (in absolute waarde) springen de vervolgregels van de <li>-tags in. In het voorbeeld is dat |2em + -3em| = 1em.
  Als de width en de aan elkaar gelijk zijn (in absolute waarde) verdwijnt de inspringing.
• Door een beetje te spelen met de width en de margin-left kun je een mooie opmaak creëren.
• Als de bullet niet "zwaar" genoeg is kun je font-weight: bold toevoegen.

De CSS-code van het voorbeeld ziet er als volgt uit:

<style>
ul {
  list-style: none;
}
ul li:before {
  content: "\25b6";
  color: red;
  display: inline-block;
  width: 2em;
  margin-left: -3em;
}
</style>

Dit werkt niet goed bij Chromium-browsers (.o.a. Chrome en Edge) op Android. Daar verschijnt in plaats van een rood driehoekje een blauw vierkantje met daarin een wit driehoekje.

Je kunt deze aanpak gebruiken om elk willekeurig karakter als bullet te gebruiken. Onderstaand tabelletje geeft een kleine indruk van de mogelijkheden.

In de eigenschap content kun je zowel de code als het karakter zelf zetten. Bij "exotische" karakters gebruik je het beste de code, dan is het zekerder dat het gewenste karakter op het scherm verschijnt.
Een volledige lijst van in dit verband bruikbare karaktercodes vind je op www.w3schools.com/cssref/css_entities.asp.

Je kunt een bullet samenstellen uit meerdere karakters. Je kunt er ook spaties inzetten; die maak je met de code: \0020.
Als je spaties gebruikt moet je daarvoor de code gebruiken. Een spatie direct van het toetsenbord werkt niet altijd goed.
Een voorbeeld: de bullet: ♥ • ♥ maak je met:
    content: "\2665\0020\2022\0020\2665";

Bron: https://www.w3schools.com/howto/howto_css_bullet_color.asp