Emoji’s gebruiken als bulletpoints in CSS? Dat kan!

Het is nog vrij nieuw in de verschillende browsers (vanaf Chrome 79, Firefox 39 en Opera 66), maar het is sinds kort mogelijk om een tekststring toe te voegen aan de CSS “list-style-type“.

Dit maakt het mogelijk om bijvoorbeeld een – of een + te gebruiken in je opsommingen, als volgt:

ul{
  list-style-type: "+";
}

Dit ziet er dan als volgt uit:

  • Opsomming 1
  • Opsomming 2

Natuurlijk allemaal heel leuk en aardig, maar wat moet je hier verder mee? Nou, emoji’s, bijvoorbeeld!

ul{
  list-style-type: "🎈";
}

Bovenstaande code zal er dan als volgt uit komen te zien:

  • Opsomming 1
  • Opsomming 2

Dit maakt de mogelijkheden ineens een stuk groter. Opsommingen met uitroeptekens als waarschuwingen? Pizzapunten bij een pizzarecept? You name it!

Vond je dit interessant, en wil je meer weten? Neem dan gerust contact met mij op!

✉️ Neem contact op