:: markör - CSS-tricks

Anonim

Den ::marker pseudo-elementet är för styling stilistiska markör för en listelement. Till exempel punkten för en standard

    (t.ex. •) eller siffran för en standard
      (t.ex. 1.). Detta gör det extremt enkelt att göra enkla saker som att färga dem.

      Som ett pseudo-element kan du välja ::markeri DevTools för att inspektera, men det är inte riktigt "i DOM" som ett normalt element.

      Chrome DevTools väljer ::markerpseudo-element och visar stilar.

      Du kan kombinera ::markermed contentegenskapen för att ändra vad markören är. Till exempel att ersätta listkulor med emoji:

      Om du ändrar display egenskapen till list-itemnågot element kan du styra dess ::marker. Här

      element är numrerade, som kombinerar idén om CSS-räknare:

      Markörerna är fortfarande listmarkörer, så är föremål för saker som list-style-position.

      Relaterad

      Artikel den 5 maj 2020

      Lista Style Recept

      Chris Coyier

      Mer information

      • Spec

      Webbläsarstöd

      Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.

      Skrivbord

      Krom Firefox IE Kant Safari
      86 68 Nej 86 11.1

      Mobil / surfplatta

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