:: penanda - Trik CSS

Anonim

The ::marker pseudo-elemen untuk styling penanda gaya dari daftar elemen. Misalnya, poin-poin default

    (mis. •) atau angka default
      (misalnya 1.). Ini membuatnya sangat mudah untuk melakukan hal-hal sederhana seperti mewarnai mereka.

      Seperti elemen pseudo, Anda akan dapat memilih ::markerdi DevTools untuk diperiksa, tetapi tidak benar-benar "di DOM" seperti elemen normal.

      Chrome DevTools memilih ::markerpseudo-element dan menampilkan gayanya.

      Anda dapat menggabungkan ::markerdengan contentproperti untuk mengubah apa itu penanda. Misalnya, mengganti poin daftar dengan emoji:

      Jika Anda mengubah display properti menjadi list-itemdi salah satu elemen, Anda dapat mengontrolnya ::marker. Sini

      elemen diberi nomor, yang menggabungkan gagasan penghitung CSS:

      Penanda tersebut tetap merupakan penanda daftar, begitu juga dengan hal-hal seperti list-style-position.

      Terkait

      Artikel pada 5 Mei 2020

      Resep Gaya Daftar

      Chris Coyier

      Informasi Lebih Lanjut

      • Spesifikasi

      Dukungan Browser

      Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.

      Desktop

      Chrome Firefox YAITU Tepi Safari
      86 68 Tidak 86 11.1

      Ponsel / Tablet

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