:: marker - CSS-trucs

Anonim

Het ::marker pseudo-element is bedoeld voor het stylen van de stilistische markering van een lijstelement. Bijvoorbeeld het opsommingsteken van een default

    (bijv. •) of het cijfer van een standaard
      (bijvoorbeeld 1.). Dit maakt het extreem gemakkelijk om eenvoudige dingen te doen, zoals ze inkleuren.

      Net als een pseudo-element, kun je ::markerin DevTools selecteren om te inspecteren, maar het is niet echt "in de DOM" zoals een normaal element.

      Chrome DevTools selecteert het ::markerpseudo-element en toont de stijlen.

      U kunt ::markermet de contenteigenschap combineren om de markering te wijzigen. Bijvoorbeeld, lijstkogels vervangen door emoji:

      Als u de display eigenschap wijzigt list-itemin een element, kunt u de ::marker. Hier

      elementen zijn genummerd, wat het idee van CSS-tellers combineert:

      De markeringen zijn nog steeds lijstmarkeringen, dus onderhevig aan zaken als list-style-position.

      Verwant

      Artikel op 5 mei 2020

      Lijststijlrecepten

      Chris Coyier

      Meer informatie

      • Spec

      Browser-ondersteuning

      Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.

      Bureaublad

      Chrome Firefox D.W.Z Rand Safari
      86 68 Nee 86 11.1

      Mobiel / tablet

      Android Chrome Android Firefox Android iOS Safari
      88 85 81 11.3-11.4