:: marker - Trucchi CSS

Anonim

Lo ::marker pseudo-elemento serve per modellare il marker stilistico di un elemento della lista. Ad esempio, il punto elenco di un file predefinito

    (es. •) o il numero di un valore predefinito
      (ad esempio 1.). Questo rende estremamente facile fare cose semplici come colorarle.

      Come uno pseudo-elemento, sarai in grado di selezionare ::markerin DevTools da ispezionare, ma non è realmente "nel DOM" come un elemento normale.

      Chrome DevTools selezionando lo ::markerpseudo-elemento e mostrando gli stili.

      Puoi combinarlo ::markercon la contentproprietà per modificare il valore del marker. Ad esempio, sostituendo i punti elenco con emoji:

      Se modifichi la display proprietà list-itemsu qualsiasi elemento, puoi controllarne ::marker. Qui

      gli elementi sono numerati, che combina l'idea dei contatori CSS:

      I marcatori sono ancora marcatori di elenco, quindi sono soggetti a cose come list-style-position.

      Relazionato

      Articolo del 5 maggio 2020

      Ricette in stile elenco

      Chris Coyier

      Maggiori informazioni

      • Spec

      Supporto browser

      Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.

      Desktop

      Cromo Firefox IE Bordo Safari
      86 68 No 86 11.1

      Mobile / Tablet

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